JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2flex item 2flex item 2flex item 2</div>
  <div class="flex-item">flex item 3</div>
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>

CSS

.flex-container {
  width: 400px;
  background-color: lightgrey;
}

.flex-item {
  background-color: cornflowerblue;
  width: 122px;
  margin-bottom: 10px;
  float: left;
  padding: 15px;
}

JavaScript

(function($) {
  $('.flex-container').masonry({
    columnWidth: 152,
    gutter: 10,
    itemSelector: '.flex-item'
  });
})(jQuery);