CSS match height of other elements in row - html

Question

I'm using Bootstrap, and I'm trying to make a row of boxes be the same height.
Here is a dumbed-down example:
CSS:
.col-md-4 {
border:1px solid black;
height:100%;
}
Html:
<div class="row">
<div class="col-md-4">Less text</div>
<div class="col-md-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a fringilla magna, nec vestibulum felis. Donec sollicitudin porta sem eu dignissim. Vivamus pellentesque leo vel pellentesque blandit</div>
<div class="col-md-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a fringilla magna, nec vestibulum felis. Donec sollicitudin porta sem eu dignissim. Vivamus pellentesque leo vel pellentesque blandit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a fringilla magna, nec vestibulum felis. Donec sollicitudin porta sem eu dignissim. Vivamus pellentesque leo vel pellentesque blandit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a fringilla magna, nec vestibulum felis. Donec sollicitudin porta sem eu dignissim. Vivamus pellentesque leo vel pellentesque blandit
</div>
</div>
This results in the first box in the row being small, and the third box being very large. I want them all to have the same height.
How do I make the height of all the boxes in the row match the tallest box without setting a static height? I don't know how big the largets box will be. I know I could do this with a table, but that would not be optimal. Is there a way to do this with CSS?
Here is a bootply example. I did some googling but couldn't find what I was looking for.

Answer 1

CSS Only solution
Note: Use carefully and target the styles to your specific .col-md-4 elements. But for your code sample:
.col-md-4 {
display: table-cell;
float: none;
border:1px solid black;
height:100%;
}
Demo http://www.bootply.com/JXL6MYXiWO

Answer 2

$(document).ready(function(){
var highestCol = Math.max($('.div01').outerHeight(),
$('.div02').outerHeight(),
$('.div03').outerHeight());
$('.col-md-4').outerHeight(highestCol);
})
jQuery example, quite fast and effective.
Just give those divs additional unique classes, e.g. div01, div02, div03.
Check out http://jsfiddle.net/a7jow8c3/

Answer 3

Flexbox is probably your best option at this point in time. See this article: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
And current browser support: http://caniuse.com/#feat=flexbox