Align button with formgroups (bootstrap 3) - css

Question

How do I vertically align a button to the text box controls?
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label class="control-label">Stuff 1</label>
<select class="form-control">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label class="control-label">Stuff 2</label>
<select class="form-control">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label class="control-label">Stuff 3</label>
<select class="form-control">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
</div>
</div>
<div class="col-sm-3">
<button class="btn btn-primary btn-lg btn-block">Search</button>
</div>
</div>
https://jsfiddle.net/2nn422ax/

Answer 1

See a css solution in jsfiddle below:
https://jsfiddle.net/2nn422ax/1/
CSS:
.row{
position: relative;
}
.button-container{
position: absolute;
bottom: 0;
right: 0;
}
.form-group{
margin-bottom: 0px;
}

Answer 2

It appears that the button is aligned to the text email above the form field, as it should be. If you use margin:top for the button about maybe 30px, it should align with the text fields if you are talking about the search button. Hope that helps.

Answer 3

Just use modern and agile flexbox:
.row {
display: flex;
align-items: center;
}
Jsfiddle