JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
<div class="thumbnail">
<img src="img/3.jpg">
<div class="caption">
<h5>Lorem ipsum dolor sit amet</h5>
<a href="#" class="uppercase bold">recipe</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
<div class="thumbnail">
<img src="img/3.jpg">
<div class="caption">
<h1>how to</h1>
<a href="#" class="uppercase bold">recipe</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
<div class="thumbnail">
<img src="img/3.jpg">
<div class="caption">
<h5>Lorem ipsum dolor sit amet, consectetur </h5>
<a href="#" class="uppercase bold">recipe</a>
</div>
</div>
</div>
</div>
JavaScript
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.each(function() { $(this).height(tallest); });
}
$(document).ready(function() {
equalHeight($(".thumbnail"));
});