JSFiddle - React, Tailwind, and code Playground

HTML

<header>
<h1 id="logo">
	<span class="word">
		<span class="w">w</span>
		<span class="o">o</span>
		<span class="r">r</span>
		<span class="d">d</span>
	</span>
	<span class="arrangement">
		<span class="a1">a</span>
		<span class="r1">r</span>
		<span class="r2">r</span>
		<span class="a2">a</span>
		<span class="n1">n</span>
		<span class="g">g</span>
		<span class="e1">e</span>
		<span class="m">m</span>
		<span class="e2">e</span>
		<span class="n2">n</span>
		<span class="t">t</span>
	</span>
</h1>
</header>

CSS

h1#logo {
	font-family:Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	text-align: justify;
	font-size:1.8em;
	display:block;
	width:100%;
}

h1#logo:after {
    content: "";
  	display: inline-block;
  	width: 100%;
}

.word .w { }
.word .o { padding-left:30px; }
.word .r { padding-left:10px; }
.word .d { padding-left:50px; }

.arrangement .a1 { }
.arrangement .r1 { }
.arrangement .r2 { }
.arrangement .a2 { }
.arrangement .n1 { }
.arrangement .g { }
.arrangement .e1 { }
.arrangement .m { }
.arrangement .e2 { }
.arrangement .n2 { }
.arrangement .t { }