JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="top">blah blah blah blah blah blah blah blah blah blah blah blah  blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    </div>
    <div id="bottom">
       
        text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
       
        
    </div>
</div>

CSS

#container
{
    height:200px;
    width:300px;
    border:5px solid #cccccc;
}
#top
{
    min-height:100px;
    width:200;
    border:3px solid red;
}
#bottom
{
   border:3px solid blue;
    width:200;
}

JavaScript

var conheight = $("#container").height();
console.log("conheight",conheight);
var botheight = $("#bottom").height();
console.log("botheight",botheight);
var topheight = $("#top").height();
console.log("topheight",topheight);
var heightdiff = conheight - topheight;
console.log("heightdiff",heightdiff);
var bottext = $("#bottom").html();
console.log(bottext);
if( bottext.length > heightdiff)
{
    console.log("exceeded");
   console.log(bottext.length);
}
else
{
    console.log("within div");
}