JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="test">
		<li><div class="blue">test<br/>test</div></li>
		<li><div class="red">test<br/><br/><br/>test</div></li>
		<li><div class="green">test<br/><br/>test</div>	</li>	
	</ul>

CSS

html, body { 
    padding: 0px; 
    margin: 0px; 
    height: 100%; 
    text-align: center; 
}

#test { 
    display: flex; 
    border: 1px solid blue; 
    list-style: none; 
    padding: 0px; 
    margin: 0;
}
	
#test li{
    display: flex;
    height: auto; 
    border: 1px solid orange; 
    font-size: 30px; 
    padding: 50px;
}

.blue { 
    background: blue;        
}
	
.red {
    background: red;
}

.green {
    background: green;  
}