JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://desandro.com/_base/js/jquery.masonry.min.js"></script>
Click on a box
<br>
<div class="wrap" id="grid">
    
    <div class="box">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
    </div>
    
    <div class="box">
        <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. </p>
    </div>
    
    <div class="box">
        <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula    </p>
    </div>
    
    <div class="box">
        <h2>This is the box with no width set</h2>
    </div>
    
    <div class="box">
        <h2>Sit amet mi ullamcorper vehicula</h2>
    </div>
    
    <div class="box">
        <p>adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.</p>
    </div>
    
    <div class="box">
        <p>Sit amet mi ullamcorper vehicula</p>
    </div>
    
    <div class="box">
        <p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
    </div>
    
    <div>
        <div class="box">
            <p>Vestibulum volutpat, lacus a ultrices sagittis,</p>
            <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula    </p>
        </div>
        
        <div class="box">
            <p>Sit amet mi ullamcorper vehicula</p>
        </div>
        
        <div class="box">
            <p>Morbi purus libero</p>
        </div>
        
        <div class="box">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        </div>
        
        <div class="box">
            <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi...

CSS

.box { color: #222 }
.wrap {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: none repeat scroll 0 0 #FFFFFF;
    border: 0;
    margin-bottom: 20px;
    padding: 10px;
    width: 550px;
}
.box {
    border-radius: 5px;
    -moz-border-radius:  5px;
    -webkit-border-radius: 5px;
    background: #D8D5D2;
    float: left;
    font-size: 11px;
    margin: 5px;
    padding: 5px;
    width: 100px;
}

JavaScript

$(document).ready(function(){
    
    $('#grid').masonry({
        singleMode: false,
        itemSelector: '.box',
        animate: true
    });
    
    $('.box').click(function(){
        if ($(this).is('.expanded')){
            restoreBoxes();
        } else {
            $(this)
                // save original box size
                .data('size', [ $(this).width(), $(this).height() ])
                .animate({
                    width: 335,
                    height: 335
                }, function(){
                    $('#grid').masonry();
                });
            restoreBoxes();
            $(this).addClass('expanded');
        }
        
        function restoreBoxes(){
            var len = $('.expanded').length - 1;
            $('.expanded').each(function(i){
                var box = $(this).data('size');
                $(this).animate({
                    width: ( box[0] || 100 ),
                    height: ( box[1] || 'auto' )
                }, function(){
                    if (i >= len) {
                        $('#grid').masonry();
                    }
                })
                    .removeClass('expanded');
            })
                }
                });
        });