JSFiddle - React, Tailwind, and code Playground

by infous

HTML

<div class="container">
         <div class="photo"></div>
         <div class="photo"></div>
         <div class="photo"></div>
         <div class="photo"></div>
         <div class="photo"></div>
    </div>
    <div class="container">
         <div class="photo"></div>
         <div class="photo"></div>
         <div class="photo"></div>
         <div class="photo"></div>
         <div class="photo"></div>
         <div class="photo"></div>
         <div class="photo"></div>
    </div>

CSS

.container {
        display:inline-flex;
        flex-flow : column wrap;
        align-content : flex-start;
        height : 350px;
    background : blue;
    }

.photo {
    width : 150px;
    height:100px;
    background : red;
    margin : 2px;
}

JavaScript

$(document).ready(function() {
 $('.container').each(function( index ) {
     var lastChild = $(this).children().last();
     var newWidth = lastChild.position().left - $(this).position().left + lastChild.outerWidth(true);
     $(this).width(newWidth);
    })
});