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">
        <img src="http://www.ryanjay.com/images/music/015.jpg">
    </div>
    
    <div class="box">
        <img src="http://www.ryanjay.com/images/portrait/001.jpg">
    </div>
    
    <div class="box">
        <img src="http://www.ryanjay.com/images/music/003.jpg">
    </div>
    
    <div class="box">
        <img src="http://www.ryanjay.com/images/portrait/002.jpg">
    </div>
    
    <div class="box">
        <img src="http://www.ryanjay.com/images/portrait/003.jpg">
    </div>
    
    <div class="box">
        <img src="http://www.ryanjay.com/images/portrait/005.jpg">
    </div>
    
    <div class="box">
        <img src="http://www.ryanjay.com/images/personal/007.jpg">
    </div>
    
    
</div>

CSS

.box { color: #222 }
.wrap {
    border: 0;
    width: 100%;
}
.box {
    float: left;
    font-size: 11px;
    width: 200px;
    margin: 0px;
    padding: 0px;
    display: inline;
}

JavaScript

$(document).ready(function(){
    
        $('.box img').css({
        width: '100%',
        height: 'auto'
    });
    
    $('#grid').masonry({
        singleMode: false,
        itemSelector: '.box',
        resizeable: true,
        animate: true
    });
    

    
            $('.box').click(function(){
        if ($(this).is('.expanded')){
            restoreBoxes();
        } else {
            $(this)
                // save original box size
                .data('size', [ $(this).width(), $(this).height() ])
                .animate({
                    width: 400
                }, function(){
                    $('#grid').masonry();
                });
            restoreBoxes();
            $(this).addClass('expanded');
        }
        
        function restoreBoxes(){
            var len = $('.expanded').length - 1;
            $('.expanded').each(function(i){
                var w = $(this).data('width');
                $(this).animate({
                    width: ( w || '200' )
                }, function(){
                    if (i >= len) {
                        $('#grid').masonry();
                    }
                })
                    .removeClass('expanded');
            });
                }
                });
        });