JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="item-wrap">
  <div class="item">
  text
  </div>
  </div>
  <div class="item-wrap">
  <div class="item">
  text
  <br>
  line2
  </div>
  </div>
  <div class="item-wrap">
  <div class="item">
  text
  </div>
  </div>
  <div class="item-wrap">
  <div class="item">
  text
  </div>
  </div>
</div>

CSS

.wrapper{
  display: flex;
  flex-flow: row wrap;
  margin: -10px;
  padding: 10px;
  background: green;
}
.item-wrap{
  flex: 0 0 50%;
}
.item{
  background: orange;
  margin: 10px;
}