All Labels With Same Height, On Each Row

Using Bootstrap, is there an elegant way to make all the labels of a form to be of the same height, in each row, so that the inputs are bottom aligned with each other? Please take

Solution 1:

See updated fiddle

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6">
            <label class="control-label" for="total_contribution_months">A very large and long label for an input</label>
        </div>
        <div class="col-xs-6">
            <label class="control-label" for="age">Same height as left</label>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <input id="total_contribution_months" class="form-control" type="text">
        </div>
        <div class="col-xs-6">
            <input id="age" class="form-control">
        </div>
    </div>        
</div>

Solution 2:

We usually would not sacrifice responsiveness by putting all labels into one row.

Answer : add an arbitrary height for your label and then push all label text to the bottom.

label {
    height: 40px;
    vertical-align: bottom;
    display: table-cell;
    padding-bottom: 5px;
}

Plese note vertical-align is effective only when display: table-cell;.

JSFiddle