JSFiddle - React, Tailwind, and code Playground

HTML

<div class="a">

<div class="first">
  <div class="b">
  1
  </div>
  <div class="b">
  2
  </div>
</div>

<div class="second">

  <div class="b">
  3
  </div>
  <div class="b">
  4
  </div>
</div>

</div>

CSS

.first, .second{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-flow:row wrap;
  text-align:center;
}

.b {
  width: 20em;
  margin:1em;
  border:1px solid blue;
}