Vertical align input elements with different size label

Question

I'm trying to align form-group vertically at the bottom whenever I've some label with more than one line.

Example: http://jsfiddle.net/9vtsojqg/3/

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-3">
        <div id="small" class="form-group">
            <label class="control-label">normal label</label>
            <input class="form-control"></input>
        </div>
    </div>
    <div class="col-xs-1">
        <div class="form-group">
            <label class="control-label">example of a huge label</label>
            <input class="form-control"></input>
        </div>
    </div>
</div>

The only way I found to align the elements vertically was adding margin-top to the form-groups with one line label

#small{
  margin-top:20px;
}

but with the grid system that could vary. How can I align the elements based on the biggest (most lines occupied) label?

Answer 1

Actually I just found the solution I was looking for in here, so using:

.row{
  display: flex; /* or inline-flex */
  flex-flow: row nowrap; /* is default: columns along the main-axis (row) and no wrapping to next lines */
  align-items: flex-end; /* bottom */

I achieve what I was looking for. ex.: jsfiddle

Update: This will change the normal behavior of the class row so I suggest that this properties should be use with some caution. In my case I'll use this in form .row or assign another class to this elements. Other solutions or comments related to this solution are appreciated.

Update 2: New version after the heads up from Gorostas http://jsfiddle.net/9vtsojqg/8/

form .row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -ms-flex-direction: row nowrap;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;

  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}