JSFiddle - React, Tailwind, and code Playground

HTML

<ul>

<li><div id="one" class="normal">One</div></li>
<li><div id="two" class="normal">Two</div></li>
<li><div id="three" class="normal">Three</div></li>
<li><div id="four" class="big">
    The last div vertically aligns to it's content's last line of text. I want to align the top of all the colored divs.
    
    
</div></li>
</ul>


<body>
</body>

CSS

#one {
	background-color:red;
}
#two {
	background-color:green;
}
#three {
	background-color:yellow;
}
#four {
	background-color:blue;
}
.normal {
	height:100px;
	width:200px;
	display:inline-block;
	
}
.big {
	height:200px;
	width:300px;
	display:inline-block;
}

ul {
	display:block;
}

ul li{
	display:inline;
}