JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id='columncontainer'>

    <div class='imagecontainer' style='padding-bottom:66.66%;'>
        <img class='lazyload'>
        <div class='imagetextcontainer'>
            <div class='vertaligncontainer'>
                <p class='imagename'>Text</p>
                <p class='imagedesc'>Text</p>
            </div>
        </div>
    </div>
    
    <div class='imagecontainer' style='padding-bottom:66.66%;'>
        <img class='lazyload'>
        <div class='imagetextcontainer'>
            <div class='vertaligncontainer'>
                <p class='imagename'>Text</p>
                <p class='imagedesc'>Text</p>
            </div>
        </div>
    </div>
    
    <div class='imagecontainer' style='padding-bottom:66.66%;'>
        <img class='lazyload'>
        <div class='imagetextcontainer'>
            <div class='vertaligncontainer'>
                <p class='imagename'>Text</p>
                <p class='imagedesc'>Text</p>
            </div>
        </div>
    </div>
    
    <div class='imagecontainer' style='padding-bottom:66.66%;'>
        <img class='lazyload'>
        <div class='imagetextcontainer'>
            <div class='vertaligncontainer'>
                <p class='imagename'>Text</p>
                <p class='imagedesc'>Text</p>
            </div>
        </div>
    </div>
    
    <div class='imagecontainer' style='padding-bottom:66.66%;'>
        <img class='lazyload'>
        <div class='imagetextcontainer'>
            <div class='vertaligncontainer'>
                <p class='imagename'>Text</p>
                <p class='imagedesc'>Text</p>
            </div>
        </div>
    </div>
    
    <div class='imagecontainer' style='padding-bottom:66.66%;'>
        <img class='lazyload'>
        <div class='imagetextcontainer'>
            <div class='vertaligncontainer'>
                <p class='imagename'>Text</p>
                <p...

CSS

#columncontainer  {
    position: relative;
    width: 100%;
    column-count: 3;
    column-gap: 10px;
}

.imagecontainer {
    position: relative;
    background-color: red;
    margin-bottom: 10px;
    column-break-inside: avoid;
    -moz-column-break-inside:avoid;
    -webkit-column-break-inside:avoid;
}

JavaScript

// Javascript only being used to provide random heights for elements out of convenience for this example, in place of varying image aspect ratios of unknown size in the real project. So please don't consider it in the solution.
$(document).ready(function() {
		$('.imagecontainer').each(function() {
    		var randomH = Math.floor(Math.random() * 200) + 1
  			$(this).css('height', randomH + 'px');
    });
});