JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
<div class='container'>
    <div class='box'>Foo</div>
    <div class='box'>Foo</div>
    <div class='box'>Foo</div>
    <div class='box'>Foo</div>
    <div class='box'>Foo</div>
    <div class='box'>Foo</div>
    <div class='box'>Foo</div>
    <div class='box'>Foo</div>
    <div class='box'>Foo</div>
    <div class='box'>Foo</div>
    <div class='box'>Foo</div>
    <div class='box'>Foo</div>
</div>

<button class='butt'>Add content</button>

CSS

.container {
    width: 110px;
}

.box {
    width: 50px;
    color: #222;
float: left;
background: white;
    border: 1px solid #ddd;
    box-sizing: border-box;
margin: 5px 0px;    
}

JavaScript

$('.container').masonry({
    gutterWidth: 20
});
setInterval(function(){
    $('.container').masonry();
}, 1000);

$('.butt').click(function(){
    var boxes = $('.box');
    var box = boxes.eq(Math.random()*boxes.length);
    box.append('<br/>Bar');
});