Vertically align button group within a bootstrap row

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