JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
  <div class="grid-element height1">
  1
  </div>
  <div class="grid-element height2">
  2
  </div>
  <div class="grid-element height3">
  3
  </div>
  <div class="grid-element height4">
  4
  </div>
</div>

CSS

.grid {
	max-width: 1200px;
	overflow: hidden;
	margin: 0 auto;
  background: #eee;
}

@less_works: rgba(144,255,66,0.5);

.grid-element {
	width: 50%;
	display: block;
	float: left;
	box-sizing: border-box;
	overflow: hidden;
}

.height1 {height:60px;  background: @less_works;}
.height2 {height:350px;  background: rgba(244,155,66,0.5);}
.height3 {height:80px;  background: rgba(44,55,166,0.5);}
.height4 {height:30px;  background: rgba(144,55,166,0.5);}

JavaScript

$('head style[type="text/css"]').attr('type','text/less');
less.env = 'development';
less.refreshStyles(); 

$(function(){
    
            var $container = $('.grid');
                
                $container.masonry({
                    itemSelector: '.grid-element',
                    columnWidth: '.grid-element',
                    percentPosition: true, 
                    horizontalOrder: true, 
                    transitionDuration: '0'
                });
        });