JSFiddle - React, Tailwind, and code Playground

HTML

<div id="modules">
    <div id="m1"  class="module">m1</div>
    <div id="m2"  class="module">m2</div>
    <div id="m3"  class="module">m3</div>
    <div id="m4"  class="module">m4</div>
    <div id="m5"  class="module">m5</div>
    <div id="m6"  class="module">m6</div>
    <div id="m7"  class="module">m7</div>
    <div id="m8"  class="module">m8</div>
    <div id="m9"  class="module">m9</div>
    <div id="m10" class="module">m10</div>
</div>

CSS

#modules {
  width: 100%;
  border: 1px solid red;
  overflow: auto;
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    
    -webkit-column-gap: 0px; /* Chrome, Safari, Opera */
    -moz-column-gap: 0px; /* Firefox */
    column-gap: 0px;
}

 .module {
  display: inline-block;
  width: 100%;
  height: 50px;
  border: 1px solid black;
}

#m1 {
  height: 70px;
}

#m2 {
  height: 40px;
}

#m3 {
  height: 100px;
}

#m4 {
  height: 100px;
}

#m5 {
  height: 85px;
}

#m6 {
  height: 70px;
}

#m7 {
  height: 55px;
}

#m8 {
  height: 77px;
}

#m9 {
  height: 100px;
}