JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">

<div class="item">
111111<br />
111111<br />
111111<br />
111111<br />
111111<br />
111111<br />
111111<br />

</div>
    
<div class="item">
222222222<br />
222222222<br />
222222222<br />
222222222<br />
222222222<br />
</div>
    
<div class="item">
333333333 <br />
333333333 <br />
333333333 <br />
333333333 <br />
</div>
    
<div class="item">
44444444<br />
44444444<br />
44444444<br />
44444444<br />
44444444<br />
</div>

<div class="item">
5555555555<br />
5555555555<br />
5555555555<br />
5555555555<br />
5555555555<br />
</div>    
    
<div class="item">
66666666666<br />
66666666666<br />
66666666666<br />
66666666666<br />
66666666666<br />
</div>      
    
</div>

CSS

#container, #container2{
     width:800px; 
     margin: 0 auto; 
 }
.item {
width: 375px;
margin: 5px;
float: left;
background-color:#ffffff;
border:solid 1px #B4BBCD;
min-height:50px;
text-align:justify;
word-wrap:break-word;
}

JavaScript

$(function()
{
// masonry plugin call
$('#container').masonry({itemSelector : '.item',});
});