JSFiddle - React, Tailwind, and code Playground

HTML

<center>

  <div class="c1">
      <div class="c3">
        111111111111111111<br>abc
      </div>
      <div class="c3">
        22222222222222222
      </div>
  </div>  

  <br><br>

  <div class="c1">
      <div class="c3">
        111111111111111111<br>abc
      </div>
      <div class="c3">
        22222222222222222
      </div>
      <div class="c3">
        3333333333333333
      </div>
      <div class="c3">
        444444444444444
      </div>
      <div class="c3">
        55555555555555
      </div>
      <div class="c3">
        6666666666666
      </div>
      <div class="c3">
        777777777777<br>def
      </div>
      <div class="c3">
        88888888888888888
      </div>
      <div class="c3">
        9999999999999
      </div>
  </div>
  
</center>

CSS

div.c1 {
	background: #ddd;
  display: inline-flex;
  flex-wrap: wrap;
  margin: 0 auto;
}
div.c3 {
	border-color: #0f0;
	border-style: solid;
	border-width: 3px;
	margin: 5px;
	vertical-align: top;
}