JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="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,It has survived not only five centuries, It has survived not only five centuries,It has survived not only five centuriesries,It has survived not only five centuries,It has survived not only five centuries It has survived not only five centuries,
    </div>
    <div class="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,t 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>
<div id="output">
    <h4>Overflowing text:</h4>
    <div id="textOverflowing">
        <h5>Overflowing Top Text</h5>
        <div class="top">
        </div>
        <h5>Overflowing Bottom Text</h5>
        <div class="bottom">
        </div>
    </div>
</div>

CSS

#container,
#overflow
{
    height:200px;
    width:300px;
    border:5px solid #000;
    position:relative;
}
.top
{
    background:red;
    min-height:100px;
    width:300px; 
}
.bottom
{
    background:rgba(0,0,255,0.5);
    width:300px;
}
#overflow{
    overflow:auto;
    position:fixed;
    top:-9999px;
    right:-9999px;
    width:300px; /* updates in JS to accommodate scrollbar width */
}
    #overflow > div{
        width:300px;
    }
.scrollbar-measure {
	width: 100px;
	height: 100px;
	overflow: scroll;
	position: absolute;
	top: -9999px;
}


#output{
    position:absolute;
    top:0;
    right:0;
    width:300px;
}

JavaScript

// thanks to http://davidwalsh.name/detect-scrollbar-width
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
document.body.appendChild(scrollDiv);
// Get the scrollbar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
// Delete the DIV 
document.body.removeChild(scrollDiv);


var botOverflowText = '';
var topOverflowText = '';
// copy the internal html of our container to an offscreen div for measuring
var inner = $('#container').html();
$('#overflow').css('width',(300+scrollbarWidth)+'px').html(inner);

// check if top div id taller than the container
if($('#container').find('.top').outerHeight() > $('#container').outerHeight()){
    // remove bottom element from the cloned measurer
    $('#overflow').find('.bottom').remove();
    // run doOverflow on top element
    topOverflowText = doOverflow('.top');
    // all bottom element must be overflowing
    botOverflowText = $('#container').find('.bottom').text();
}else{
    botOverflowText = doOverflow('.bottom');
}
// RATHER THAN OUTPUT THIS INFORMATION TO A VISIBLE ELEMENT HERE YOU COULD
// SAVE 'botOverflowText' and 'topOverflowText' VARIABLES WHERE EVER YOU LIKE
$('#textOverflowing').find('.top').text(topOverflowText);
$('#textOverflowing').find('.bottom').text(botOverflowText);

function doOverflow(el){
    var variable = '';
    for(x=0;x < $('#container').find(el).text().length; x++){
        if(checkOverflow($('#overflow').get(0))){
            var text = $('#overflow').find(el).text();
            // find index of last " "
            var lastIndex = text.lastIndexOf(" ");
            variable = text.slice(lastIndex - text.length) + variable;
            $('#overflow').find(el).text(text.substring(0, lastIndex));
        }else{
            return variable;
            break;
        }
    }
}

// thanks to http://stackoverflow.com/a/143889/648350
function checkOverflow(el)
{
   var isOverflowing = el.clientHeight < el.scrollHeight;
   return...