JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://instancia.net/wp-content/themes/isti/js/jquery.imagesloaded.js"></script>
<script src="http://instancia.net/wp-content/themes/isti/js/jquery.masonry.min.js"></script>
<div id="main_masonrybox">
<div class="brick">Lorem ipsum one</div>
<div class="brick">Lorem ipsum two</div>
<div class="brick">Lorem ipsum three</div>
</div>
CSS
.brick {margin: 0px auto 10px auto; padding:12px; border:1px solid #bbbbbb; -moz-border-radius:12px; -webkit-border-radius:12px; border-radius:12px;}
#main_masonrybox { width:85%; background:#cccccc; min-height:100%; margin:0 auto; }
JavaScript
jQuery(document).ready(function($) {
var $wall = $('#main_masonrybox');
var width = $(window).width();
var wallWidth = $wall.width();
$wall.imagesLoaded(function(){
$('.brick').css( 'width', wallWidth/2-50);
$wall.masonry({
itemSelector : '.brick',
columnWidth : wallWidth/2
});
});
});