JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="one">
        <div id="two"></div>
        <div id="three"></div>
    </div>
</div>

CSS

#container{
    height: 500px;
    background: yellow;
}
#one{
    background: red;
    min-height: 100px;
    height: 100px;
    max-height: 50%;
    padding: 10px;
}
#two{
    color: white;
    background: blue;
    height: 40%;
}

JavaScript

$(function() {    
    var i = 0;
    var int = setInterval(function(){   
        var one = $('#one');
        one.height(100 + 10*i++);
        $('#three').text(one.height() + 'px');
        var two = $('#two');
        two.text(two.height() + 'px');
        if(i > 15) clearInterval(int);
    }, 500);    
});