JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fppinteractive-dev.com/bazinga/_assets/js/jquery.imagesloaded.js"></script>
<script src="http://fppinteractive-dev.com/bazinga/_assets/js/jquery.masonry.min.js"></script>
<div id="part-one" class="work">
    <div class="box col2">one</div>
    <div class="box col2">two</div>
    <div class="box col2">three</div>
    <div class="box col2">four</div>
    <div class="box col4"><b>ODD FIVE</b></div>
    <div class="box col2">six</div>
    <div class="box col2">seven</div>
    <div class="box col2">eight</div>
    <div class="box col2">nine</div>
</div>

CSS

.box {
    width:200px;
    height:167px;
    float: left;
    cursor:pointer;
    border:1px solid #ff0000;
}

.work {
    top:0;
    max-width:1600px;
    position:absolute;
    border:1px solid blue;
}

.col2 {
    width:200px; 
    height:167px; 
}

.col2 img {
    max-width:200px;
}

.col4{width: 200px; height: 200px; border: 1px solid blue;}

JavaScript

$(function(){
   var $container = $('.work');            
   //$container.imagesLoaded(function(){                    
      $container.masonry({
         itemSelector: '.box',
         isAnimated: true,
      });
   //});
});