JSFiddle - React, Tailwind, and code Playground

HTML

<div id='wrapper'>
<div id='a' class='box'>aa</div>
<div id='b' class='box'>bb</div>
<div id='c' class='box'>cc</div>
<div id='d' class='box'>dd</div>
</div>

CSS

.box {
    width:80px;
    vertical-align: bottom;
    display: inline-block;
    margin: 0px;
    padding: 0px;
}
#a {
    background-color:red;
    height:200px;
}
#b {
    background-color:green;
    height:100px;
}
#c {
    background-color:yellow;
    height:150px;
}
#d {
    background-color:blue;
    height:300px;
}

#wrapper {
    border: 1px solid pink;
    display: table;
}