JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="six">
<li><div class="inner">
lorem ipsum dolor sit amet
</div></li>
<li><div class="inner">
lorem ipsum dolor sit amet
</div></li>
<li><div class="inner">
lorem ipsum dolor sit amet
</div></li>
<li><div class="inner">
lorem ipsum dolor sit amet
</div></li>
<li><div class="inner">
lorem ipsum dolor sit amet
</div></li>
<li><div class="inner">
lorem ipsum dolor sit amet
</div></li>
</ul>

CSS

.six {
  list-style: none;
  padding: 0;
  margin: 20px;
  background: #fff;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  font-size: 120%;
}
.six li {
  width: 33%;
  height: 100px;
  background: #000;
}
.six li .inner {
  width: 50%;
  height: 50px;
  margin: 25px auto;
  text-align: left;
}