JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.nealfletcher.co.uk/js/jquery.isotope.min.js"></script>
<div id="left">
    <ul>
        <li>Red</li>
        <li>Green</li>
    </ul>
</div>
<div id="middle">Middle Middle Middle Middle</div>
<div id="right">
    <div class="thumbs"></div>
    <div class="thumbs long"></div>
    <div class="thumbs"></div>
    <div class="thumbs"></div>
    <div class="thumbs"></div>
    <div class="thumbs long"></div>
    <div class="thumbs"></div>
    <div class="thumbs"></div>
</div>

CSS

body {
    padding:0;
    margin:0;
    width:100%;
    
    font-family:helvetica;
    color:black;
    font-size:12px;
    letter-spacing:0.2em;
}
html {overflow-y: scroll;}

#left {
position:fixed;
top:0;
left:0;
width:170px;
height:100%;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
border:20px solid white;
    background:blue;
}

#middle {
    float:left;
width:50%;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
    border-top:20px solid white;
    border-bottom:20px solid white;
    border-right:10px solid white;
height:100%;
    background:orange;
    }

#right {
    float:right;
width:50%;

box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
border-right:20px solid white;
border-bottom:20px solid white;
border-top:20px solid white;
    border-left:10px solid white;
background:orange;
}

.thumbs {
    box-sizing:border-box;
    border-right:10px solid white;
    border-bottom:10px solid white;
    float:left;
    background:red!important;
    width:25%;
    padding-bottom:10%;
}
.long {
    padding-bottom:30%;
    background:green!important;
}
ISOTOPE CONTENT ------------------ */ .isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    z-index: 1;
}
.isotope, .isotope .isotope-item {
    /* change duration value to whatever you like */
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -ms-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    -ms-transition-property: -ms-transform, opacity;
    -o-transition-property: -o-transform, opacity;
   ...

JavaScript

$(document).ready(function () {

    
    
    var $container = $('#right');

    $container.isotope({
        layoutMode: 'fitRows',
        itemSelector: '.thumbs',
        animationEngine: 'best-available',
        resizable: false,
       
    });

    $(window).smartresize(function () {
        $container.isotope({
            // update columnWidth to a percentage of container width
            masonry: {
                columnWidth: $container.width() /1
                
            }
        });
    });

    $(window).smartresize();

});