JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container">
<div ><h2 class="hero">a very long title</h2></div>
<div class="row">
	<div class="col-md-4" style="border: 1px solid black;">
		<p>test</p>
			<p>test</p>
			<p>test</p>
			<p>test</p>
	</div>
	<div class="col-md-4" style="border: 1px solid black;">
			<p>foo</p>
	</div>
	<div class="col-md-4" style="border: 1px solid black;">
			<p>foo</p>
	</div>
</div>
<div ><h2 class="hero">a very long title</h2></div>

<div class="row">
	<div class="col-md-4" style="border: 1px solid black;">
		<p>test</p>
			<p>test</p>
			<p>test</p>
			<p>test</p>
	</div>
	<div class="col-md-4" style="border: 1px solid black;">
			<p>foo</p>
	</div>
 
</div>
</div>

CSS

/* try to remove this css to see the effect */
.container{
    display:table;
}
.row {
    display: table-row;
}

.row [class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}