JSFiddle - React, Tailwind, and code Playground

HTML

<div id='rhombus' style='border:1px solid black;text-align:justify'>This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text This is text</div>

JavaScript

function rhomboit(obj, offset) {
    var invert = false;
    if(offset < 0){
        offset = Math.abs(offset);
        invert = true;
    }
    var line_height = getLineHeight(obj);
    var els = document.querySelectorAll('.rhombus_side');
    for (var i = 0; i < els.length; i++) {
        els[i].parentNode.removeChild(els[i]);
    }
    var new_height = heightWithOffset(obj, offset);
    var total_lines;
    var line_offset;
    while (true) {
        total_lines = Math.ceil(new_height / line_height);
        line_offset = offset / (total_lines);
        var next_height = heightWithOffset(obj, offset + line_offset);
        if (next_height === new_height) break;
        new_height = next_height;
    }
    for (var i = 0; i < total_lines; i++) {
        var left_offset = line_offset * (i + 1);
        var right_offset = offset - left_offset + line_offset;
        if(invert){
            var hold = left_offset;
            left_offset = right_offset;
            right_offset = hold;
        }
        var div = document.createElement('div');
        div.className = 'rhombus_side';
        div.style.width = left_offset + 'px';
        div.style.height = line_height + 'px';
        div.style.float = 'left';
        div.style.clear = 'left';
        //div.style.backgroundColor = 'red';
        obj.insertBefore(div, obj.firstChild);
        div = document.createElement('div');
        div.className = 'rhombus_side';
        div.style.width = right_offset + 'px';
        div.style.height = line_height + 'px';
        div.style.float = 'right';
        div.style.clear = 'right';
        //div.style.backgroundColor = 'blue';
        obj.insertBefore(div, obj.firstChild);
    }
}

function heightWithOffset(obj, offset) {
    var old_padding_left = obj.style.paddingLeft;
    obj.style.paddingLeft = (offset + 1) + 'px';
    var new_height = obj.clientHeight;
    obj.style.paddingLeft = old_padding_left;
    return new_height;
}

function getLineHeight(element) {
    //Thank...