JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.min.js"></script>
<div class="grid js-grid">
    <div class="grid-sizer"></div>
    <div class="grid-item" style="width: 48%; height: 60px; line-height: 60px;">48x60</div>
    <div class="grid-item" style="width: 25%; height: 36px; line-height: 36px;">25x36</div>
    <div class="grid-item" style="width: 27%; height: 50px; line-height: 50px;">27x50</div>
    <div class="grid-item" style="width: 25%; height: 32px; line-height: 32px;">25x32</div>
    <div class="grid-item" style="width: 27%; height: 50px; line-height: 50px;">27x50</div>
    <div class="grid-item" style="width: 48%; height: 40px; line-height: 40px;">48x40</div>
    <div class="grid-item" style="width: 25%; height: 32px; line-height: 32px;">25x32</div>
</div>

CSS

.grid-item, .grid-sizer {
    width: 1%;
}
.grid-item {
    font-size: 20px;
    color: #fff;
    text-align: center;
    background-color: gray;
    
    border: 1px solid red;
    box-sizing: border-box;
}

JavaScript

$(function () {
    $('.js-grid').masonry({
        itemSelector: '.grid-item',
        columnWidth: '.grid-sizer',
        percentPosition: true
    });
});