JSFiddle - React, Tailwind, and code Playground

HTML

<div class="▥4 winmode">
    <div class="⅙">This is my magnum opus</div>
    <div class="¼">I finally beat css</div>
    <div class="⅙">⚉ ☺ ☻ ♾ ☢</div>
    <div class="blarg-five-twelfs">I BEAT IT FOREVER</div>
</div>

<div class="▥6 dice">
    <div class="⅙">⚀</div>
    <div class="⅙">⚁</div>
    <div class="⅙">⚂</div>
    <div class="⅙">⚃</div>
    <div class="⅙">⚄</div>
    <div class="⅙">⚅</div>
</div>

<div class="▥5 star">
    <div class="⅛">→</div>
    <div class="⅛">↗</div>
    <div class="½ ✪">✪</div>
    <div class="⅛">↖</div>
    <div class="⅛">←</div>
</div>

CSS

[class^=▥] { text-align: justify; font-size: 0;
             -ms-text-justify: distribute-all-lines; } 

 [class^=▥]>* { display: inline-block; text-align: left; font-size: 13px;
                word-spacing: normal; vertical-align: top;
                -webkit-box-sizing: border-box;
                   -moz-box-sizing: border-box;
                        box-sizing: border-box; }
                        
.▥2 { word-spacing: 20px; padding-right: 10px; }
.▥3 { word-spacing: 30px; padding-right: 20px; }
.▥4 { word-spacing: 40px; padding-right: 30px; }
.▥5 { word-spacing: 50px; padding-right: 40px; }
.▥6 { word-spacing: 60px; padding-right: 50px; }
 .▥2>* { margin-right: 0 }
 .▥2>* { margin-right: -10px; }
 .▥3>* { margin-right: -20px; }
 .▥4>* { margin-right: -30px; }
 .▥5>* { margin-right: -40px; }
 .▥6>* { margin-right: -50px; }


.⅛, .⅛⇶>* { width: 12.50%; }
.⅙, .⅙⇶>* { width: 16.66%; }
.⅕, .⅕⇶>* { width: 20.00%; }
.¼, .¼⇶>* { width: 25.00%; }
.⅓, .⅓⇶>* { width: 33.00%; }
.⅜, .⅜⇶>* { width: 37.50%; }
.⅖, .⅖⇶>* { width: 40.00%; }
.½, .½⇶>* { width: 50.00%; }
.⅗, .⅗⇶>* { width: 60.00%; }
.⅝, .⅝⇶>* { width: 62.50%; }
.⅔, .⅔⇶>* { width: 66.00%; }
.¾, .¾⇶>* { width: 75.00%; }
.⅘, .⅘⇶>* { width: 80.00%; }
.⅚, .⅚⇶>* { width: 83.33%; }
.⅞, .⅞⇶>* { width: 87.50%; }
.blarg-five-twelfs { width: 41.66%; }

body { background: #000; }
.winmode { border-radius: 5px; border: 1px solid #63f;
           padding-top: 10px; padding-bottom: 10px; }
.winmode > div { font-size: 20px; border-radius: 3px;  padding: 5px;
                 border: 1px solid #f0f; background: #444; color: #b9f;
                 box-shadow: inset 0 0 40px 3px rgba(230,190,255,0.5);
                 text-shadow: 0 0 1px #000,
                              0 0 3px #36f,
                              1px 1px 1px #a9c; }

.dice { margin: 20px 0; }
.dice >* { font-size: 100px; text-align: center;
           line-height: 1; height: 95px;
           background: #eee; color: #111; }

.star >*   { color: #fe3;...