JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
  <div class="item sizer"></div>
  <div class="item item11"></div>
  <div class="item item12"></div>
  <div class="item item21"></div>
  <div class="item item12"></div>
  <div class="item item21"></div>
  <div class="item item11"></div>
  <div class="item item21"></div>
  
</div>

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script>
var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
  // options
  itemSelector: '.item',
  columnWidth: '.sizer',
  percentPosition: true
});

// element argument can be a selector string
//   for an individual element
var msnry = new Masonry( '.grid', {
  // options
});
</script>

CSS

.grid {
  width: 60vw;
}

.item {
  float: left;
}

.sizer {
  width: 20vw;
}

.item11 {
  width: 20vw;
  height: 20vw;
  background: red;
}

.item12 {
  width: 40vw;
  height: 20vw;
  background: blue;
}

.item21 {
  width: 20vw;
  height: 40vw;
  background: green;
}