JSFiddle - React, Tailwind, and code Playground

HTML

<div id="flex-container">
    <div class="flex-element">
        <p>1</p>
    </div>
    <div class="flex-element">
        <p>2</p>
    </div>
    <div class="flex-element">
        <p>3</p>
    </div>
    <div class="flex-element">
        <p>4</p>
        <p>--</p>
    </div>
    <div class="flex-element">
        <p>5</p>
        <p>--</p>
        <p>--</p>
    </div>
    <div class="flex-element">
        <p>6</p>
    </div>
    <div class="flex-element">
        <p>7</p>
    </div>
</div>

CSS

#flex-container{
    background-color:#000;
    width: 100%;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    text-align: center;
}

.flex-element{
    display: inline-block;
    width: 100%;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    -webkit-column-gap: 10px;
    margin-bottom:10px;
    background-color:#fff;
}