JSFiddle - React, Tailwind, and code Playground

HTML

<div class=box></div>
<div class=box></div>

CSS

@keyframes anim {
    from {
        height: 100px;
    }
    to {
        height: 0;
    }
}
@-webkit-keyframes anim {
    from {
        height:100px;
    }
    to {
        height:0;
    }
}
.box {
    width: 50px;
    display: inline-block;
    background: #5f0;
    height: 100px;
    border: 1px solid #000;
    vertical-align:top;
}
.box:first-of-type {
    animation: anim 10s cubic-bezier(0, 1, .5, 1);
    -webkit-animation: anim 10s cubic-bezier(0, 1, .5, 1) forwards;
}
.box:last-of-type {
    animation: anim 10s cubic-bezier(0, .5, .5, 1);
    -webkit-animation: anim 10s cubic-bezier(0, .5, .5, 1) forwards;
}