JSFiddle - React, Tailwind, and code Playground

by Thiago Diniz

HTML

<ul>
  <li>
    <p>Texto pra encher linguiça</p>
    <p>Texto pra encher linguiça</p>
    <p>Texto pra encher linguiça</p>
    <p>Texto pra encher linguiça</p>
  </li>
  
  <li>
    <p>Texto pra encher linguiça</p>
    <p>Texto pra encher linguiça</p>
    <p>Texto pra encher linguiça</p>
  </li>
  
  <li>
    <p>Texto pra encher linguiça</p>
    <p>Texto pra encher linguiça</p>
  </li>
  
</ul>

CSS

*{
  box-sizing:border-box;
  font-family:sans-serif
}

ul{
  padding:15px;
  display: flex;
	flex-wrap: wrap;
	align-items:stretch;
	justify-content: space-between
}

li{
  padding:15px;
  flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 33%; /*LARGURA DA LI*/
	display: inline-block;
	vertical-align: top;
  background-color:#FFF;
  text-align:center;
  border:1px solid #cacaca
}