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">
    <divclass="row"><divclass="col-xs-6"><labelclass="control-label"for="total_contribution_months">A very large and long label for an input</label></div><divclass="col-xs-6"><labelclass="control-label"for="age">Same height as left</label></div></div><divclass="row"><divclass="col-xs-6"><inputid="total_contribution_months"class="form-control"type="text"></div><divclass="col-xs-6"><inputid="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