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">Four</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;
}

body {
	padding-top:100px;	
}

ol, ul {
    list-style: none outside none;
		margin:0;

	display:block;
	float:right;
}

ul li{
	display:inline;
	font-size:0.7em;
	padding:0.5em;
}