JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="up">Text<br />Text<br />Text<br /></div>
    <div id="down">Text<br />Text<br />Text<br /></div>
</div>
    
<div id="height"></div>

CSS

#container { width: 300px; height: 300px; border:1px solid red; display: table;}
#up { display: table-row; height:0; }
#down { background:pink; display: table-row;}

JavaScript

var heightInfo = "Container height: " + $('#container').height() + "<br />";
heightInfo += "Up height: " + $('#up').height() + "<br />";
heightInfo += "Down height: " + $('#down').height() + "<br />";

$('#height').html(heightInfo);