JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<div>
<span class="flex">
<span>
<a href="#">
<div class="item">
<div class="item-count" align="center">
<div class="item-count">0</div>
</div>
<div class="item-status" align="center"><span>status 1</span></div>
</div>
</a>
</span>
<span>
<a href="#">
<div class="item">
<div class="item-count" align="center">
<div class="item-count">0</div>
</div>
<div class="item-status" align="center"><span>status less text</span></div>
</div>
</a>
</span>
<span>
<a href="#">
<div class="item">
<div class="item-count" align="center">
<div class="item-count">0</div>
</div>
<div class="item-status" align="center"><span>status more text in this status</span></div>
</div>
</a>
</span>
<span>
<a href="#">
<div class="item">
<div class="item-count" align="center">
<div class="item-count">0</div>
</div>
<div class="item-status" align="center"><span>status 1</span></div>
</div>
</a>
</span>
<span>
<a href="#">
<div class="item">
<div class="item-count" align="center">
<div class="item-count">0</div>
</div>
<div class="item-status" align="center"><span>status 1</span></div>
</div>
</a>
</span>
<span>
<a href="#">
<div class="item">
<div class="item-count" align="center">
<div class="item-count">0</div>
</div>
<div class="item-status" align="center"><span>status 1</span></div>
</div>
</a>
</span>
</span>
</div>
</div>
CSS
.flex{
display: flex;
justify-content:space-between;
flex-wrap:wrap;
}
.item {
border: 1px solid orange;
border-radius: 5px;
padding: 10px;
margin-right: 20px;
min-width: 150px;
margin-bottom: 30px;
}
.item-count {
font-size: 150%;
font-weight: bold;
}
.item-status {
font-size: 125%;
font-weight: bold;
}