JSFiddle - React, Tailwind, and code Playground
by Leo the Lion
HTML
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<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>
<div class="container" id="main">
<div class="row">
<section id="summary">
<div class="row">
<div class="col-md-6">
<article>
<h1>
Header 1
</h1>
<p>Lorem ipsum dolor sit amet, duo latine euismod ut. Nullam lobortis nec cu, vel nisl simul at. Ad pro omnis quando suavitate, est ea quod autem perfecto, eros brute nusquam pri ut. At saepe dicant euismod nec..</p>
</article>
</div>
<div class="col-md-6">
<article>
<h1>
Header 2
</h1>
<p>
Idque ridens consetetur et quo, ne ignota vocibus tibique eum. Ne qui vidit interpretaris, nec ullum moderatius ne. Novum viris comprehensam eu vix.</p>
</article>
</div>
</div>
<div class="row">
<div class="col-md-6">
<article>
<h1>
Header 3
</h1>
<p>
Idque ridens consetetur et quo, ne ignota vocibus tibique eum. Ne qui vidit interpretaris, nec ullum moderatius ne. Novum viris comprehensam eu vix.</p>
</article>
</div>
<div class="col-md-6">
<article>
<h1>
Header 4
</h1>
...
CSS
article{
text-align:center;
background-color:lightgray;
margin:0 25px 50px 25px;
}
h1, p{
padding:10px;
}
JavaScript
$(document).ready(function(e) {
var heightNew = 0;
$('.col-md-6 article').each(function(index, element) {
if($(this).height() > heightNew){
heightNew = $(this).height();
}
$(this).css('height', heightNew+'px');
});
});