Vertical align of button - html

Question

I want to put textboxes with button in grid system horizontally, but button doesn't want to align vertically.(It must be in grid system because I want to stack these group of items in case of mobile devices):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="form-row">
<div class="col"></div>
<div class="col-sm-2">
<label for="inputEmail4">Email</label>
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col-sm-2">
<label for="inputEmail4">Email</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col-sm-2">
<label for="inputEmail4">Email</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col-sm-2">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
<div class="col"></div>
</div>
EDIT: I solved this problem in that way:
<div class="row">
<div class="col"></div>
<div class="col-sm-2 py-0 px-1">
Last name:
<input type="text" class="form-control form-control-sm mb-2"
placeholder="Last name">
</div>
<div class="col-sm-2 py-0 px-1">
First name:
<input type="text" class="form-control form-control-sm mb-2"
placeholder="First name">
</div>
<div class="col-sm-2 py-0 px-1">
Card ID:
<input type="text" class="form-control form-control-sm mb-2"
placeholder="Card ID">
</div>
<div class="col-sm-2 py-0 px-1">
<button type="button" class="btn btn-sm btn-success btn-block mt-4
mb-2">Add</button>
</div>
<div class="col"></div>
</div>

Answer 1

Create a new class "abc" and add it to the div which contains the button:
.abc{
position:absolute;
bottom:0;
}
Hope this is what you need:
.abc{
position:absolute;
bottom:0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="form-row">
<div class="col"></div>
<div class="col-sm-2">
<label for="inputEmail4">Email</label>
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col-sm-2">
<label for="inputEmail4">Email</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col-sm-2">
<label for="inputEmail4">Email</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col-sm-2">
<button type="submit" class="btn btn-primary abc">Sign in</button>
</div>
<div class="col"></div>
</div>

Answer 2

Please use the below css class vcenter, it will both vertically and horizontally align all the child elements of the element with this class.
.vcenter {
display: flex;
justify-content: center;
align-items: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="form-row">
<div class="col"></div>
<div class="col-sm-2">
<label for="inputEmail4">Email</label>
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col-sm-2">
<label for="inputEmail4">Email</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col-sm-2">
<label for="inputEmail4">Email</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col-sm-2 vcenter">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
<div class="col"></div>
</div>