JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">

<div class="item">jdkalsjdlaskñas</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vulputate consequat tempus. Sed id orci elit, sed lobortis sapien. Nulla convallis dapibus libero, ut consectetur diam interdum et. Aliquam erat volutpat. Sed sit amet dui eget tortor porttitor euismod. Maecenas consequat pretium mauris ut iaculis. Etiam blandit sem sit amet elit ultrices dictum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent mattis pulvinar erat, at hendrerit augue venenatis at. Sed ipsum diam, dictum at imperdiet a, interdum molestie nibh. Aenean leo elit, aliquam nec facilisis a, vestibulum quis justo. Praesent euismod orci ante, sit amet tristique justo.</div>
<div class="item">feugiat at a felis. Cras in nibh erat, non sagittis mi. Aliquam erat volutpat. Aenean eu odio eget arcu convallis semper. Vestibulum vi</div>
<div class="item"> inceptos himenaeos. Donec placerat dignissim lorem, non sodales sapien faucibus sit amet. Cras faucibus iaculis lectus, suscipit mollis leo suscipit sit amet. In blandit sodales luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In a urna nisi, dapibus lobortis eros. Sed sed est blandit nibh varius pretium. Cras diam justo, tincidunt et facilisis nec, gravida sit ame</div>

</div>

CSS

#container{width:860px; margin: 0 auto; }
.item {
width: 408px;
margin: 20px 10px 10px 10px;
float: left;
background-color:#ffffff;
border:solid 1px #B4BBCD;
min-height:50px;
text-align:justify;
word-wrap:break-word; 
}

JavaScript

/**
 * jQuery Masonry v2.1.02
 * A dynamic layout plugin for jQuery
 * The flip-side of CSS Floats
 * http://masonry.desandro.com
 *
 * Licensed under the MIT license.
 * Copyright 2011 David DeSandro
 */
(function(a,b,c){var d=b.event,e;d.special.smartresize={setup:function(){b(this).bind("resize",d.special.smartresize.handler)},teardown:function(){b(this).unbind("resize",d.special.smartresize.handler)},handler:function(a,b){var c=this,d=arguments;a.type="smartresize",e&&clearTimeout(e),e=setTimeout(function(){jQuery.event.handle.apply(c,d)},b==="execAsap"?0:100)}},b.fn.smartresize=function(a){return a?this.bind("smartresize",a):this.trigger("smartresize",["execAsap"])},b.Mason=function(a,c){this.element=b(c),this._create(a),this._init()},b.Mason.settings={isResizable:!0,isAnimated:!1,animationOptions:{queue:!1,duration:500},gutterWidth:0,isRTL:!1,isFitWidth:!1,containerStyle:{position:"relative"}},b.Mason.prototype={_filterFindBricks:function(a){var b=this.options.itemSelector;return b?a.filter(b).add(a.find(b)):a},_getBricks:function(a){var b=this._filterFindBricks(a).css({position:"absolute"}).addClass("masonry-brick");return b},_create:function(c){this.options=b.extend(!0,{},b.Mason.settings,c),this.styleQueue=[];var d=this.element[0].style;this.originalStyle={height:d.height||""};var e=this.options.containerStyle;for(var f in e)this.originalStyle[f]=d[f]||"";this.element.css(e),this.horizontalDirection=this.options.isRTL?"right":"left",this.offset={x:parseInt(this.element.css("padding-"+this.horizontalDirection),10),y:parseInt(this.element.css("padding-top"),10)},this.isFluid=this.options.columnWidth&&typeof this.options.columnWidth=="function";var...