By switching to CSS table layout, you can have columns of same height for free, with the constraint of not being able to relatively position "(visual) cells" (in Firefox, at least) so you must do that on the '(visual) table"
EDIT2: .bootstrap-touchspin
is also displayed as table and that fails in Chrome. Adding a div around this component that'll be absolutely positioned (and not the component itself anymore) solves this problem.
Demo: http://jsfiddle.net/R5n9j/9/
Compatibility is IE8+ (because of / thanks to display: table
and table-cell
)
HTML
<div class="table pos-reference">
<div class="cell">
<img class="img-responsive" src="http://placehold.it/200x200">
</div>
<div class="cell has-touchspin">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit mattis pretium. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<div class="pos-abs">
<input id="input-cm" type="text" class="input-lg" name="input-cm">
</div>
</div>
</div>
CSS
.table {
display: table;
table-layout: fixed;
}
.pos-reference {
position: relative;
}
.cell {
display: table-cell;
vertical-align: top;
}
.has-touchspin {
height: 100%;
padding-bottom: 50px; /* Avoids superposition of content and absolutely positioned touchspin */
}
.pos-abs {
position: absolute;
bottom: 0;
border: 1px solid #F00;
}
EDIT: Explanation about why your attempt at positioning the .input-group
failed: TWBS .col-AZ-NN
are already relatively positioned so the closest ancestor to .input-group
being positioned isn't the one you set but .col-md-6
. See Firebug screenshot below. Otherwise, your attempt was a good one ;)