JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="top">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, 
    </div>
    <div id="bottom">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock,
    </div>
</div>
<div id="overflow"></div>
<h4>Overflowing text:</h4>
<div id="textOverflowing"></div>

CSS

#container
{
    height:200px;
    width:300px;
    border:5px solid #cccccc;
    position:relative;
}
#top
{
    min-height:100px;
    width:300px;
    border:3px solid red;
    position:absolute;
    top:0;
    bottom:100px;
}
#bottom
{
   border:3px solid blue;
    width:300px;
    position:absolute;
    height:100px;
    bottom:0;
    overflow:hidden;
}
#overflow{
    width:300px;
    position:fixed;
    top:-9999px;
    left:-9999px;
}
#textOverflowing{
    color:red;
}

JavaScript

var overflowText = '';
$('#overflow').text($('#top').text()).css('height',$('#top').height()+'px');

for(x=0;x < $('#overflow').text().length; x++){
    if(checkOverflow($('#overflow').get(0))){
        var text = $('#overflow').text();
        overflowText = text.slice(-1) + overflowText;
        $('#overflow').text(text.substring(0, text.length - 1));
    }else{
        $('#textOverflowing').text(overflowText);
        break;
    }
}

// thanks to http://stackoverflow.com/a/143889/648350
function checkOverflow(el)
{
   var curOverflow = el.style.overflow;
   if ( !curOverflow || curOverflow === "visible" )
      el.style.overflow = "hidden";

   var isOverflowing = el.clientWidth < el.scrollWidth 
      || el.clientHeight < el.scrollHeight;

   el.style.overflow = curOverflow;

   return isOverflowing;
}