JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<!-- original <div id='columncontainer'> -->
<div id='columncontainer'>

 
    <div class="margin">
      <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>
    
</div>

CSS

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

.margin {
  positon: relative;
  padding: 5px 0px;
     column-break-inside: avoid;
    -moz-column-break-inside:avoid;
    -webkit-column-break-inside:avoid;
}

.imagecontainer {
    display: inline-block;
    width: 100%;
    max-height: 100%;
    position: relative;
    background-color: red;
}

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.

var rand_count = function(){
  let min = Math.ceil(1);
  let max = Math.floor(100);
  return Math.floor(Math.random() * (max - min)) + min;
};
style='padding-bottom:66.66%;'

$(document).ready(function() {
		for(var i = 0; i < rand_count(); i++){
    $( "#columncontainer" ).append( `
    <div class="margin">
      <div class='imagecontainer'>
          <img class='lazyload'>
          <div class='imagetextcontainer'>
              <div class='vertaligncontainer'>
                  <p class='imagename'>Text</p>
                  <p class='imagedesc'>Text</p>
              </div>
          </div>
      </div>       
    </div>
    ` );
    }
		$('.imagecontainer').each(function() {
    		var randomH = Math.floor(Math.random() * 200) + 1
  			$(this).css('min-height', randomH + 'px');
    });
});