JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page">
  <div id="A">
    <span>A</span>
    <span>B</span>
    <span>C</span>
    <span>D</span>
    <span>E</span>
    <span>F</span>
    <span>G</span>
    <span>H</span>
    <span>I</span>
    <span>J</span>
    <span>K</span>
  </div>
</div>

CSS

#A {
  background: green;
  margin: auto;
  display: inline-block;
}

#page {
  margin: auto;
  text-align: center;
  width: 80%;
}

#A span {
  display: inline-block;
  background: yellow;
  width: 100px;
  height: 100px;
  margin: 10px;
  text-align: center;
}

JavaScript

function magic(id, tag) {
  var div, z, e;
  div = document.getElementById(id);
  z = div.getElementsByTagName(tag);
  km = (z.length >> 1);
  for (k = 0; k < km; k++) {
    e = document.createElement(tag);
    e.style.height = "0";
    e.style.marginTop = "0";
    e.style.marginBottom = "0";
    e.style.paddingTop = "0";
    e.style.paddingBottom = "0";
    e.style.borderTopWidth = "0";
    e.style.borderBottomWidth = "0";
    div.appendChild(e);
  }
}
magic("A", "span");