JSFiddle - React, Tailwind, and code Playground

by brianarn

HTML

<ul id="list">
    <li id="one"></li>
    <li id="two"></li>
</ul>

CSS

#list {
    height: 150px;
    width: 500px;
    background-color: #def;
    border: 1px solid #789;
    overflow: hidden;
    padding: 10px;
}

#list li {
    -webkit-transition-property: height;
    -webkit-transition-duration: 1s;
    display: inline-block;
    height: 20%;
    background-color: #789;
    border: 1px solid #345;
    width: 30px;
    vertical-align: text-bottom;
}

#two {
    height: 30%;
}