JSFiddle - React, Tailwind, and code Playground

by allcaps

HTML

<p>Resize...</p>
<p>Delete js to see the normal behaviour.</p>
<div class="w-100">T</div>
<div class="w-100">h</div>
<div class="w-100">e</div>
<div class="w-100 space"></div>
<div class="w-900">q</div>
<div class="w-900">u</div>
<div class="w-900">i</div>
<div class="w-900">c</div>
<div class="w-900">k</div>
<div class="w-900 space"></div>
<div class="w-100">b</div>
<div class="w-100">r</div>
<div class="w-100">o</div>
<div class="w-100">w</div>
<div class="w-100">n</div>
<div class="w-100 space"></div>
<div class="w-900">f</div>
<div class="w-900">o</div>
<div class="w-900">x</div>
<div class="w-900 space"></div>
<div class="w-100">j</div>
<div class="w-100">u</div>
<div class="w-100">m</div>
<div class="w-100">p</div>
<div class="w-100">s</div>
<div class="w-100 space"></div>
<div class="w-900">o</div>
<div class="w-900">v</div>
<div class="w-900">e</div>
<div class="w-900">r</div>
<div class="w-900 space"></div>
<div class="w-100">t</div>
<div class="w-100">h</div>
<div class="w-100">e</div>
<div class="w-100 space"></div>
<div class="w-900">l</div>
<div class="w-900">a</div>
<div class="w-900">z</div>
<div class="w-900">y</div>
<div class="w-900 space"></div>
<div class="w-100">d</div>
<div class="w-100">o</div>
<div class="w-100">g</div>
<div class="w-100">.</div>
<div class="w-100 space"></div>
<div class="w-900">T</div>
<div class="w-900">h</div>
<div class="w-900">e</div>
<div class="w-900 space"></div>
<div class="w-100">q</div>
<div class="w-100">u</div>
<div class="w-100">i</div>
<div class="w-100">c</div>
<div class="w-100">k</div>
<div class="w-100 space"></div>
<div class="w-900">b</div>
<div class="w-900">r</div>
<div class="w-900">o</div>
<div class="w-900">w</div>
<div class="w-900">n</div>
<div class="w-900 space"></div>
<div class="w-100">f</div>
<div class="w-100">o</div>
<div class="w-100">x</div>
<div class="w-100 space"></div>
<div class="w-900">j</div>
<div class="w-900">u</div>
<div class="w-900">m</div>
<div class="w-900">p</div>
<div...

CSS

div {
    float: left;
    display: block;
    font-family: Roboto;
    font-size: 200%;
    height: 1em;
}
.w-900 {
    font-weight: 100;
}
.w-900 {
    font-weight: 900;
}
.space {
    height: 1em;
    width:.3em;
    background-color: rgba(255,0,0,.2);
}

JavaScript

function draw() {
    var spaces = $('.space');
    var x = 0;
    var prev_x = 0;
    var prev_space = false;

    $(spaces).css({
        "width": ".3em",
        "clear": "none"
    })
    $.each(spaces, function (index, space) {
        x = $(space).position().left;
        if (x < prev_x) {
            $(prev_space).css({
                "width": "0",
                "clear": "both"
            });
        }
        prev_space = space;
        prev_x = x;
    });
}

$(window).resize(function () {
    draw();
});
draw();