JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/smoothness/jquery-ui.css">
<div class="resizable" id="resizable1">
    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.
</div>

<br />
<div class="resizable" id="resizable2"></div>

CSS

.resizable { width: 200px; height: 250px; background: silver; }

JavaScript

$(function() {
    makeBoxesResizable();

    $(".resizable").parent().resize(function() {
        var ch = $(this).children("div")[0].clientHeight || this.offsetHeight;
        var sh = $(this).children("div")[0].scrollHeight;
        var overflowHappened = (ch < sh);

        if (overflowHappened) {
            handleOverflow($(this).find("div:first"));
        }
    });

});

function handleOverflow(element) {
    var $element = $(element);
    var text = $element.text();
    var text1 = text.substring(0, text.length / 2);
    var text2 = text.substring(text.length / 2 + 1, text.length - 1);
    $element.text(text1);
    $("#resizable2").text(text2);
}

function makeBoxesResizable() {
    $(".resizable").wrap('<div/>').css({
        'overflow': 'hidden'
    }).parent().css({
        'display': 'inline-block',
        'overflow': 'hidden',
        'height': function() {
            return $('.resizable', this).height();
        },
        'width': function() {
            return $('.resizable', this).width();
        },
        'paddingBottom': '12px',
        'paddingRight': '12px'

    }).resizable().find('.resizable').css({
        overflow: 'auto',
        width: '100%',
        height: '100%'
    });
}