JSFiddle - React, Tailwind, and code Playground

HTML

<pre><span class="hl0">I am</span> <span class="hl2">under the text</span> <span class="hl5">above</span></div>
<div><span class="hl1" id="span1">am under</span><span class="hl4" id="span2">text above</span></div>
</pre>

CSS

.hl0 {
    background: lime;
}
.hl1 {
    background: red;
}
.hl2 {
    background: cyan;
}
.hl3 {
    background: orange;
}
.hl4 {
    background: yellow;
}
.hl5 {
    background: red;
}

JavaScript

var el = document.createElement('pre');
el.style.display = 'inline-block';
el.innerHTML = ' ';
document.body.appendChild(el);
var width = parseFloat(getComputedStyle(el).width);
document.body.removeChild(el);

document.querySelector('#span1').style.marginLeft = (2 * width) + 'px';
document.querySelector('#span2').style.marginLeft = (5 * width) + 'px';