JSFiddle - React, Tailwind, and code Playground

by Front Dev

HTML

<div class="masonry">
    <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 class="item">
        <p class="item__par">texttexttexttext</p> <a href="" class="">texttexttexttexttexttext</a>

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

CSS

.masonry {
    -moz-column-count:3;
    -webkit-column-count:3;
    column-count: 3;
}
.item {
    width: 273px;
    border:1px solid black;
    background: lightgray;
    display:inline-block;
    vertical-align:top;
    margin-right:50px;
    margin-bottom:50px;
    overflow: hidden;
    /* Fix for firefox and IE 10-11  */
    -webkit-column-break-inside: avoid;
    /* Chrome, Safari, Opera */
    page-break-inside: avoid;
    /* Deprecated Firefox */
    -moz-column-break-inside:avoid;
    /* Current Firefox */
    column-break-inside:avoid;
    break-inside: avoid;
    /* IE 10+ */
    break-inside: avoid-column;
}