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="col-xs-12 widget-header-div">
<div class="col-xs-12 col-sm-6 col-lg-3 widget-header-item">
<div class="panel panel-primary pmd-z-depth">
<div class="panel-heading">Box 1</div>
<div class="panel-body">
<table class="col-md-12 text-left">
<tr>
<td>Key</td>
<td>Value</td>
</tr>
<tr>
<td>Key</td>
<td>Value</td>
<td>Value</td>
</tr>
<tr>
<td>Key</td>
<td>Value</td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-3 widget-header-item">
<div class="panel panel-primary pmd-z-depth">
<div class="panel-heading">Box 2</div>
<div class="panel-body">
<table class="col-md-12 text-left">
<tr>
<td>Key</td>
<td>Value</td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-xs-12 col-lg-6 widget-header-item">
<div class="panel panel-primary pmd-z-depth">
<div class="panel-heading">Box 3</div>
<div class="panel-body">
<p>Larger body of text here</p>
<p>Larger body of text here</p>
<p>Larger body of text here</p>
<p>Larger body of text here</p>
<p>Larger body of text here</p>
<p>Larger body of text here</p>
</div>
</div>
</div>
</div>
CSS
.widget-header-div, .widget-header-div > div[class*='col-'] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex:1 1 auto;
}