JSFiddle - React, Tailwind, and code Playground

by grammar

HTML

<article>
    <div class="left">
    <p>Lucas ipsum dolor sit amet dantooine darth yoda binks hutt baba fisto dooku tatooine darth. Kessel endor gamorrean skywalker. R2-d2 lando baba jawa fett chewbacca solo. Hutt anakin tusken raider tusken raider chewbacca c-3po. Jar greedo moff organa antilles lando. Solo skywalker naboo maul bespin han yavin leia ponda. Mothma leia baba wicket. Palpatine kenobi wampa ahsoka leia darth amidala. Dooku dantooine hutt luke c-3p0 dooku. Lando mandalorians wampa obi-wan yavin jabba windu skywalker mothma.</p>
    
    <p>Fett ponda yoda wedge yavin. Darth greedo darth anakin skywalker owen skywalker. Jinn jango palpatine greedo solo luuke mara. Tatooine antilles antilles darth. Sidious antilles sith darth. Chewbacca sith solo solo grievous vader owen skywalker boba. Solo moff mon gonk. Skywalker solo antilles yoda dooku boba lando. Skywalker ventress darth ackbar. Skywalker skywalker wedge solo jango gonk calrissian maul. Antilles droid hutt grievous fett. Kit darth calamari darth. Hutt darth coruscant darth moff mace jade chewbacca.</p>
    
    <p>Binks fett amidala c-3po owen watto wookiee darth. Yavin boba yoda hutt calrissian hutt skywalker biggs. Palpatine mara hutt gamorrean yavin palpatine moff luuke. Grievous calrissian leia hutt organa amidala dantooine moff gamorrean. Thrawn yavin ewok naboo organa moff. Jango moff hutt skywalker lobot moff chewbacca. K-3po fett yoda darth maul hutt moff. Lars maul yoda owen dagobah aayla lando hutt darth. Tatooine darth darth dagobah moff alderaan ventress droid chewbacca. Solo antilles mustafar skywalker skywalker hutt jar moff.</p>
    
    <p>Aayla solo boba windu. Ackbar kessel calrissian jabba organa organa twi'lek mandalore. Jar owen antilles organa. C-3po kessel obi-wan maul maul lobot antilles. Darth wicket mon darth lobot skywalker aayla ahsoka. Fisto darth darth skywalker calamari binks ventress amidala. Jade calrissian jabba calamari leia dooku. Mandalore baba darth binks...

CSS

article {
    
}

div {
    width: 45%;
}

article p {
}

.left {
    float: left;
}

.right {
    float: right;
}

JavaScript

var con =  "<div><img src=\"http://lorempixel.com/300/300/cats\" /></div>",
    maxH = $('.left').height()/2 + 160,
    heights = [],
    ctr = 0,
    sideH = 0;

// Get all p heights
$('p').each( function( idx ) {
    heights[idx] = $(this).height();
});

// Calculate how many ps make up the maximum height
while( sideH < maxH ) {
    sideH += heights[ctr];
    ctr++;
    if (ctr > heights.length) break;
}

// This is the key
var diff = sideH - maxH;
console.log( "diff = " + diff );

// Get all remaining p
var breakUp = $('article p:eq('+(ctr-1)+')'),
    remainingP = $('article p:gt('+(ctr-1)+')'),
    clones = remainingP.clone(),
    text = breakUp.text(),
    text2 = text,
    rowHeight = diff,
    height = 0,
    rowCount = 1,
    flag = false,
    breakingPoint = 0;

//breakUp.css('background','red');

// Set the text of the element to one character
// to get the height of a single row.
breakUp.text('a');
rowHeight = breakUp.height();
breakUp.text('');

var h = Math.floor( diff / rowHeight );

// this is modified from 
// https://github.com/STAR-ZERO/jquery-ellipsis/blob/master/src/jquery.ellipsis.js

for (var i = 0; i < text.length; i++) { 
    
    var s = text.substring(i, i + 1);
 
    breakUp.text(breakUp.text() + s);
 
    height = breakUp.height();

    if (height !== 0 && height !== rowHeight) {
        rowHeight = height;
        rowCount++;
    if (rowCount > h) {
        
            flag = true;
            breakingPoint = i;
            break;
        }
    }
}

if (flag) {

    text = breakUp.text();

    while (true) {


        text = text.substring(0, text.length - 1);
        breakUp.text(text);
        height = breakUp.height();

        if (height < rowHeight) {
            break;
        }
    }
    
    var leftoverText = text2.substring( breakingPoint, text2.length - 1 ),
        newParagraph = $('<p></p>');
    newParagraph.html( leftoverText );
}

remainingP.remove();

$('.right').append( [ con, newParagraph, clones ] );