JSFiddle - React, Tailwind, and code Playground

HTML

<div  id="a" contenteditable>Start typing here..</div>
<div  id="b"></div>
<div  id="c">You should position me way off the screen</div>
<div  id="d">I'm a mirror of div C</div>

CSS

body { padding: 50px; }
div {         
    border: 1px solid gray; 
    margin: 5px; 
    height: 75px; 
    width: 100px; 
    overflow: hidden; 
    display: inline-block;
}
div#c { visibility: hidden; position: absolute; left: -9999px; }

JavaScript

$('#a').bind('input propertychange', function() {
    //copy current content into hidden div c
    $('#c').html($(this).html());
    //now we know height of content if it we didn't have overflow on
    var cHeight = $('#c').height();
    //compare to current height, if greater than then we have overflowed
    if (cHeight > $(this).height()) {
        //move new content in div B
        //there are lots of ways to do this and it depends on what
        //people's input is. Can they cut/paste in?
        //Maybe we start at the end of the string, working backwards until
        //we find that content now fits.
    }
});