JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://desandro.github.io/masonry/jquery.masonry.min.js"></script>
<div id="wrapper">
    <div id="container">
        <div class="box">
            <img src="http://images.huffingtonpost.com/2007-11-01-ice.jpg" />
        </div>
        <div class="box">
                <img src="http://www.wwalls.ru/mini/201211/57608.jpg" />
            </div>
            <div class="box">
                <img src="http://artistsandwriters.com/site/wp-content/uploads/2014/09/IMG_7303LR-390x150-1412284267.jpg" />
            </div>
    </div>
</div>

CSS

#wrapper
{
    background-color: red;
	margin: 0 auto; max-width:580px;
}

#container,
{
	   overflow: hidden; 
       width: 100%;
}
.box
{
   
    /*max-width: 290px!important; width: 50%;float: left;*/
    max-width: 290px!important; width: 50%;
	
}

.box img{width: 100%;}

JavaScript

$( window ).load( function()
{
    var wc=$( '#container').width();
    wc=parseInt(wc);
    if( wc % 2) 
    {
        var wb=$('.box').width();
        wb--;
        $('.box').width(wb)
    } 
    
 
    $( '#container').masonry(
    {
        itemSelector: '.box',
        columnWidth: function( containerWidth ) {
            return parseInt(containerWidth / 2);
          }
        
    });
});