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{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;     
    background-color:#000;
    text-align: center;
  /*
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2; */
   
}

.flex-element {
    flex-basis: calc(50% - 20px);
    align-self: flex-start;
    margin: 10px;
    background-color:#fff;

    /*
    display: inline-block;
    width: 100%;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    -webkit-column-gap: 10px; */
    }