JSFiddle - React, Tailwind, and code Playground

HTML

<block class="absolute-position-everything" style="height: 230px;">
<char style="left: 0px; top: 0px;">P</char>
<char style="left: 9px; top: 0px;">o</char>
<char style="left: 18px; top: 0px;">s</char>
<char style="left: 24px; top: 0px;">i</char>
<char style="left: 29px; top: 0px;">t</char>
<char style="left: 35px; top: 0px;">i</char>
<char style="left: 40px; top: 0px;">o</char>
<char style="left: 49px; top: 0px;">n</char>
<char style="left: 58px; top: 0px;">&nbsp;</char>
<char style="left: 62px; top: 0px;">A</char>
<char style="left: 73px; top: 0px;">b</char>
<char style="left: 82px; top: 0px;">s</char>
<char style="left: 88px; top: 0px;">o</char>
<char style="left: 97px; top: 0px;">l</char>
<char style="left: 102px; top: 0px;">u</char>
<char style="left: 111px; top: 0px;">t</char>
<char style="left: 117px; top: 0px;">e</char>
<char style="left: 125px; top: 0px;">&nbsp;</char>
<char style="left: 129px; top: 0px;">E</char>
<char style="left: 138px; top: 0px;">v</char>
<char style="left: 146px; top: 0px;">e</char>
<char style="left: 154px; top: 0px;">r</char>
<char style="left: 160px; top: 0px;">y</char>
<char style="left: 168px; top: 0px;">t</char>
<char style="left: 174px; top: 0px;">h</char>
<char style="left: 183px; top: 0px;">i</char>
<char style="left: 188px; top: 0px;">n</char>
<char style="left: 197px; top: 0px;">g</char>
<char style="left: 205px; top: 0px;">:</char>
<char style="left: 0px; top: 23.2px;">I</char>
<char style="left: 5px; top: 23.2px;">&nbsp;</char>
<char style="left: 7.529411764705882px; top: 23.2px;">c</char>
<char style="left: 14.529411764705882px; top: 23.2px;">a</char>
<char style="left: 22.529411764705884px; top: 23.2px;">l</char>
<char style="left: 27.529411764705884px; top: 23.2px;">l</char>
<char style="left: 32.529411764705884px; top: 23.2px;">&nbsp;</char>
<char style="left: 35.05882352941177px; top: 23.2px;">o</char>
<char style="left: 44.05882352941177px; top: 23.2px;">u</char>
<char style="left: 53.05882352941177px; top:...

CSS

/* One-line Justify */

.justify {
    text-align: justify;
    word-spacing: -10px;
    margin-bottom: -1.45em;    
}

.justify:after {
    content: "";
    display: inline-block;
    width: 100%;
}

/* White Space Flexbox */

.flexbox-justify {
    display: -webkit-box;
    -webkit-box-pack: justify;
    -webkit-box-orient: horizontal;
}

.flexbox-justify .glue {
    -webkit-box-flex: 1;
    width: 0.33em;
    display: block;
}

/* Absolute Position Everything */

char {
    position: absolute;
}

/* White Space Custom Width */

whitespace {
    display: inline-block;
}

/* Colors */

.absolute-position-everything { color: purple; }
.white-space-flexbox { color: green; }
.one-line-justify { color: blue; }
.word-spacing { color: red; }
.white-space-custom-width { color: orange; }


/* Base Values */

block {
    display: block;
    line-height: 1.45em;
    margin: 10px auto;
    width: 344px;
    font-family: Constantia;
    position: relative;
}

line {
    display: block;
}