JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="item">
    Hello 
  </div>
  <div class="item">
    hello hello
  </div>
  <div class="float-item item">
    Hello Hello 
  </div><div class="float-item item">
    Hello Hello 
  </div><div class="float-item item">
    Hello Hello 
  </div><div class="float-item item">
    Hello Hello 
  </div><div class="float-item item">
    Hello Hello 
  </div><div class="float-item item">
    Hello Hello 
  </div><div class="float-item item">
    Hello Hello 
  </div><div class="float-item item">
    Hello Hello 
  </div><div class="float-item item">
    Hello Hello 
  </div>
</div>

<hr />

<div class="cat-container">
<div class="float-item item">
    Hello 
  </div>
  <div class="float-item item">
    Hello Hello 
  </div>
  <div class="float-item item">
    Hello Hello 
  </div><div class="float-item item">
    Hello Hello 
  </div><div class="float-item item">
    Hello Hello 
  </div><div class="float-item item">
    Hello Hello 
  </div><div class="float-item item">
    Hello Hello 
  </div><div class="float-item item">
    Hello Hello 
  </div><div class="float-item item">
    Hello Hello 
  </div><div class="float-item item">
    Hello Hello 
  </div><div class="float-item item">
    Hello Hello 
  </div><div class="float-item item">
    Hello Hello 
  </div><div class="float-item item">
    Hello Hello 
  </div><div class="float-item item">
    Hello Hello 
  </div>
</div>

CSS

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  background: red;
  border: 1px solid #000;
}

.cat-container{
   margin:0;
   padding:5px;
   border:1px solid red;
   overflow: auto;
   height: auto !important;
}

.float-item {
  float: left;
}