JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<div class="rewards_options">
<div class="col-sm-4 col-xs-6 reward_option">
<div>image</div>
<div class="reward_name"><h3>Short sd fsadf sdf sdg sdfg dfg dfg sdf sfdg sdfg sdfg sdfg sdf gsdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg sdfg </h3></div>
<div class="iteration_count"><h5>1 boxes</h5></div>
</div>
<div class="col-sm-4 col-xs-6 reward_option">
<div>image</div>
<div class="reward_name"><h3>A freakishly long name so this has to be amazing product mate</h3></div>
<div class="iteration_count"><h5>1 boxes</h5></div>
</div>
<div class="col-sm-4 col-xs-6 reward_option">
<div>image</div>
<div class="reward_name"><h3>Med long name of a product</h3></div>
<div class="iteration_count"><h5>1 boxes</h5></div>
</div>
<div class="col-sm-4 col-xs-6 reward_option">
<div>image</div>
<div class="reward_name"><h3>A Name</h3></div>
<div class="iteration_count"><h5>1 boxes</h5></div>
</div>
</div>
CSS
.reward_option { border:1px solid #000; margin-top:10px;}
.reward_name { border:1px solid #F00;}
JavaScript
$(document).ready( function() {
// make same height
make_children_same_height('.reward_option',['.reward_name','.iteration_count']);
});
function make_children_same_height(element_parent, child_elements) {
for (i = 0; i < child_elements.length; i++) {
var tallest = 0;
var an_element = child_elements[i];
$(element_parent).children(an_element).each(function() {
// using outer height since that includes the border and padding
if(tallest < $(this).outerHeight() ){
tallest = $(this).outerHeight();
}
});
tallest = tallest+1; // some weird shit going on with half a pixel or something in FF
$(element_parent).children(an_element).each(function() {
$(this).css('min-height',tallest+'px');
});
}
}