JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://lab.bullycreative.co/catalyst/wp-content/themes/catalyst/assets/js/masonry.pkgd.min.js"></script>
CSS
body {
width: 160px;
}
.box {
float: left;
width: 40px;
height: 40px;
border: 1px solid blue;
font-size: 2em;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
JavaScript
var growTo = 80;
for (i = 0; i < 6; ++ i)
$('<div class="box"></div>').appendTo('body').text(i);
$('body').masonry({
itemSelector: '.box',
isAnimated: true
});
$('.box').on('click', function() {
$('.active').animate({
width: '40px',
height: '40px'
}, 200, function() {
$(this).removeClass('active');
});
$(this).animate({
width: growTo + 'px',
height: growTo + 'px'
}, 500, function() {
$('body').masonry();
});
$(this).addClass('active');
});