JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
</div>

CSS

#wrap { text-align:justify }
#wrap div { display:inline-block; background:black; padding:0 0.5em; color:white; vertical-align:middle; line-height:70px }
#wrap .a { font-size:5em; background:#300 }
#wrap .b { font-size:2em; background:#030 }
#wrap .d { font-size:3.5em; background:#003 }

JavaScript

var wrapDiv = document.getElementById("wrap");
var cssClasses = ["a", "b", "d"];
var labels = ["a", "b", "c"];
for (var i = 0; i < 20; i += 1) {
    var divElement = document.createElement("div");
    divElement.setAttribute("class", cssClasses[i % 3]);
    divElement.innerHTML = labels[i % 3];
    wrapDiv.appendChild(divElement);
    //wrapDiv.appendChild(document.createTextNode(" "));
}