JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<div class="masonry">
    <div class="item">
        <div class="item--inner">
            <p>itemitemitemitemitemitemitemitemitem</p>
        </div>
    </div>
    <div class="item">
        <p class="item__par">texttexttexttext</p> <a href="" class="">texttexttexttexttexttext</a>

        <div class="item--inner">
            <p>itemitemitemitemitemitemitemitemitem</p>
        </div>
    </div>
        <div class="item">
        <p class="item__par">texttexttexttext</p> <a href="" class="">texttexttexttexttexttext</a>

        <div class="item--inner">
            <p>itemitemitemitemitemitemitemitemitem</p>
        </div>
    </div>
        <div class="item">
        <p class="item__par">texttexttexttext</p> <a href="" class="">texttexttexttexttexttext</a>

        <div class="item--inner">
            <p>itemitemitemitemitemitemitemitemitem</p>
        </div>
    </div>
    <div class="item">
        <p class="item__par">texttexttexttext</p> <a href="" class="">texttexttexttexttexttext</a>

        <div class="item--inner">
            <p>itemitemitemitemitemitemitemitemitem</p>
        </div>
    </div>
    <div class="item">
        <p class="item__par">texttexttexttext</p> <a href="" class="">texttexttexttexttexttext</a>

        <div class="item--inner">
            <p>itemitemitemitemitemitemitemitemitem</p>
        </div>
    </div>
    <div class="item">
        <p class="item__par">texttexttexttext</p> <a href="" class="">texttexttexttexttexttext</a>

        <div class="item--inner">
            <p>itemitemitemitemitemitemitemitemitem</p>
        </div>
    </div>
</div>

CSS

.item {
    width: 273px;
    border:1px solid black;
    background: lightgray;
    display:inline-block;
    vertical-align:top;
    margin-bottom:50px;
    margin-left:0px;
}

JavaScript

$('.masonry').masonry({

          itemSelector: '.item',
          gutter: 68
      });