JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content01">

<div class="produto">Some text<br><br><br><b>$ 20.00</b><br><br>
		<br><span class="comprar_button">COMPRAR</span>
</div>
    
<div class="produto">Some text text some text some text some text<br><br><br><b>$ 20.00</b><br><br>
		<br><span class="comprar_button">COMPRAR</span>
</div>

<div class="produto">Some text<br><br><br><b>$ 20.00</b><br><br>
		<br><span class="comprar_button">COMPRAR</span>
</div>

<div class="produto">Some text Some text Some text Some text Some text Some text Some text Some text Some text<br><br><br><b>$ 20.00</b><br><br>
		<br><span class="comprar_button">COMPRAR</span>
</div>
   
   
   </div>

CSS

#content01{
 min-height:500px;
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
}

.produto{
  position: relative;
	display: inline-block;
	margin-top: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	border: 2px solid #F6F6F6;
	width: 246px;
	text-align: center;
	vertical-align: top;
	padding-bottom:10px;
}


.comprar_button {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, -50%);
	background: green;
	padding:10px;
	color: #fff;
	text-align:center;
	font-weight:bold;
	vertical-align:bottom;
	align-self: flex-end;
}
.comprar_button a{
	color: #fff!important;
}
.comprar_button img{
	width: 15px;
	height: 15px;
}