JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row iso">
<div class="col-sm-8 iso-item" style="padding-bottom: 20px;">
<div class="item">
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. </p>
</div>
</div>
<div class="col-sm-4 iso-item" style="padding-bottom: 20px;">
<div class="item">
<p>Pack my box with five dozen liquor jugs. Pack my box with five dozen liquor jugs. Pack my box with five dozen liquor jugs. Pack my box with five dozen liquor jugs. Pack my box with five dozen liquor jugs. Pack my box with five dozen liquor jugs. Pack my box with five dozen liquor jugs. </p>
</div>
</div>
<div class="col-sm-4 iso-item" style="padding-bottom: 20px;">
<div class="item">
<p>Pack my box with five dozen liquor jugs. Pack my box with five dozen liquor jugs. Pack my box with five dozen liquor jugs. Pack my box with five dozen liquor jugs. Pack my box with five dozen liquor jugs. Pack my box with five dozen liquor jugs. Pack my box with five dozen liquor jugs. </p>
</div>
</div>
<div class="col-sm-4 iso-item" style="padding-bottom: 20px;">
...
CSS
.item {
background-color: black;
color: #fff;
}
JavaScript
$(document).ready(function() {
var $container = $('.iso');
$container.imagesLoaded( function(){
$container.isotope({
resizable: true,
layoutMode : 'masonry',
itemSelector : '.iso-item'
});
});
});