Vertically align button group within a bootstrap row - html

Question

I have a question regarding the vertical alignment of a button group within a row, using bootstrap.
This is an image that explains what I'm trying to achieve
And the following code is used in my current project:
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Override the default bootstrap behavior where horizontal description lists
will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
white-space: normal;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
<div class="row">
<div class="col-sm-9">
#if (item.Completed) {
<h4><span class="label label-success">Completed</span> #item.Procedure.Title</h4>
} else {
<h4><span class="label label-danger">Not completed</span> #item.Procedure.Title</h4>
}
<div class="row">
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Time required:</dt>
<dd>#item.Procedure.Time</dd>
<dt>Material required:</dt>
<dd>#item.Procedure.Material</dd>
<dt>Engineers required:</dt>
<dd>#item.Procedure.Engineers</dd>
<dt>Documentation:</dt>
<dd>#item.Procedure.Documents</dd>
</dl>
</div>
<div class="col-sm-6">
<dl class="dl-horizontal">
<dt>Status:</dt>
<dd>#item.Status</dd>
<dt>Note:</dt>
<dd>#item.Note</dd>
</dl>
</div>
</div>
</div>
<div class="col-sm-3" style="vertical-align: middle;">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-success" role="group">
<span class="glyphicon glyphicon-ok"></span>
OK
</button>
<button type="button" class="btn btn-danger" role="group">
<span class="glyphicon glyphicon-remove"></span>
Not OK
</button>
<button type="button" class="btn btn-info" role="group" data-toggle="modal" data-target="#noteModal#(item.ID)">
<span class="glyphicon glyphicon-pencil"></span>
Add note
</button>
</div>
<div id="noteModal#(item.ID)" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add note</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="form-group">
<label for="note">Note:</label>
<textarea class="form-control" rows="5" id="note" style="min-width: 100%;"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Add note</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
Any help apreciated, thanks!

Answer 1

I solved the problem using the flex property on the outer .row
.row-flex {
display: flex;
align-items: center;
}
Image

Answer 2

This is what I did:
.btn-group {
flex-wrap: wrap;
width: 80px;
}
button{
width:80px;
}
Here is the JSFiddle demo