JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="a">A</div>
    <div id="b">B</div>
    <div id="c">C</div>
</div>
<button id="restart">Restart</button>

CSS

#container {
    background: #ddd;
    text-align: center;
}
#container > div {
    background: #cff;
    display: inline-block;
    padding: 2%;
    height: 100px;
    width: 25%;
}
#container #a {
    height: 30px;
    margin: 0 10% 0 0;
}

JavaScript

var b = document.getElementById('b'),
    button = document.getElementById('restart'),
    amt = 0,
    start = 100,
    timeout;

function realign() {
    if (amt != 100) {
        amt++;
        b.style.height = (start + amt) + 'px';
    } else {
        b.style.height = '50px';
        return;
    }
    
    timeout = setTimeout(realign, 100);
}

function restart() {
    clearTimeout(timeout);
    b.style.height = start + 'px';
    amt = 0;
    realign();
}

button.onclick = restart;

timeout = setTimeout(realign, 1000);