JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <div class="bin">
    <p>
    some content
    </p>
  </div>
    <div class="bin">
    <p>
    some content    some content    some content    some content    some content    some content    some content    some content    some content    some content    some content    some content    some content    some content    some content    some content    some content    some content    some content    some content    some content    some content    some content    some content    some content    some content    some content    some content
    </p>
  </div>
  <div class="bin">
    <p>
    some content
    </p>
  </div>
  <div class="bin">
    <p>
    some content
    </p>
  </div>
 <div class="bin">
    <p>
    some content
    </p>
  </div> <div class="bin">
    <p>
    some content
    </p>
  </div> <div class="bin">
    <p>
    some content
    </p>
  </div> <div class="bin">
    <p>
    some content
    </p>
  </div> <div class="bin">
    <p>
    some content
    </p>
  </div> <div class="bin">
    <p>
    some content
    </p>
  </div>
</div>

CSS

#container {
  background: black;
  display: flex;
  flex-wrap: wrap;
}
div.bin {
flex: 1 0 25%;
padding:1.0em;
box-sizing: border-box;
width: 25%; 
background: white;
}