JSFiddle - React, Tailwind, and code Playground

HTML

<button id='peter'>Peter</button>
<button id='orb'>Orb</button>
<hr><br>

<div id="myText">Elit. Libero voluptatibus hac sociis magnam! Voluptatum, numquam ultricies, aliquid, laudantium pulvinar praesent nisl, sociis. Autem integer sociis! Praesent ultricies, id tempora nec nunc auctor aliquam dolores morbi sollicitudin iaculis. Fames cillum harum felis semper potenti autem pariatur, augue incidunt corrupti repudiandae optio consequatur? Eos eiusmod accusantium harum? Ultricies pulvinar hymenaeos? Torquent auctor nisi, temporibus veritatis! Ipsum ornare vitae pede dolore hic dictumst pariatur diamlorem placerat rutrum dis ac, nemo minima scelerisque fugit tenetur reiciendis metus, proin tenetur eiusmod porro, ante ad venenatis ducimus, bibendum mollit facere bibendum augue tempore quaerat? Praesent quibusdam necessitatibus ac, aenean mattis magni, nascetur, cumque assumenda sem, esse sem eaque amet felis! Exercitationem. Inceptos suspendisse officia error, officia ut nemo hac. Omnis aspernatur urna voluptatibus ducimus mollit vestibulum massa sapiente commodo litora maiores, quis do, quod senectus curae? Expedita anim, fames suspendisse delectus itaque dolorum. Fringilla sequi maecenas voluptatibus, rutrum! Expedita consectetuer scelerisque mollit mollitia? Id laboriosam? Ridiculus lorem, morbi facilis? Ea sunt vero temporibus! Inceptos. Quaerat? Morbi blandit pharetra. Sunt numquam nisi proident tellus, habitant? Impedit rerum fusce. Nibh ridiculus, litora lectus tempor lacinia, viverra consequatur, sollicitudin erat mollitia quasi ullamco similique, animi? Ex? Maecenas porro? Error neque quisque quis dignissim quos, tellus eaque venenatis vulputate sint magnis quam, aptent, rhoncus. Voluptas et excepturi omnis a fames eros mollit hendrerit molestias nec semper corrupti risus aspernatur illo qui, porttitor risus, incidunt accusantium omnis et quam explicabo? Officia aenean, nemo inventore tincidunt magna odio maiores? Optio sed perspiciatis interdum, interdum...

CSS

#myText {
    line-height: 20px;
}
#myText span {
    border: red 1px solid;
    margin: 1px 0;
    line-height: 16px;
}

JavaScript

/* @PeterVr */
function wrapLinesPeter($container) {
    // get the text from the conatiner
    var text = $container.text();

    // split the text into words
    var words = text.split(' ');

    // wrap each word in a span and add it to a tmp
    var tmp = '';
    tmp += '<span>' + words.join('</span><span>') + '</span> ';
    

    // remove the text from the container, and replace it with the wrapped words
    $container.html($(tmp));  // <- alter DOM

    // prepare the offset variable and tmp
    var tmp = '';
    var top = null;
    $container.find('span').each(function (index, word) {
        $word = $(word);
        // if this is the first iteration
        if (top == null) {
            // set the top
            top = $word.position().top;
            // open the first line
            tmp = '<span class="line">';
        }

        // if this is a new line (top is bigger then the previous word)
        if (top < $word.position().top) {
            // close the previous line and start a new one
            tmp += '</span><span class="line">';
            // change the top
            top = $word.position().top;
        }

        // add the content of the word node + a space
        tmp += $word.text() + ' ';
    });
    // close the last line
    tmp += '</span>';

    // remove the content of the conatiner, and replace it with the wrapped lines
    $container.html($(tmp));  // <- alter DOM
}

/* @orb */
function wrapLinesOrb($container) {
    var text = $container.text(),
        words = text.split(' '),
        lines = [],
        line = $('<span>'),
        tmp = $('<span>').css('visibility', 'hidden').appendTo('body'); // <- alter DOM

    $container.text(""); // <- alter DOM

    $.each(words, function (index, word) {
        if (tmp.text(line.text() + " " + word).width() < $container.width()) {
            line.text(line.text() + " " + word);
        } else {
            lines.push(line);
            line.remove(); // <- alter DOM (inside loop...