JSFiddle - React, Tailwind, and code Playground

by Xavier Jamonet

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

#page {
     width: 100%;
}

#A {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content:center;
  justify-content:center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-direction: row;
  flex-direction: row;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  background:green;
}
#A span
{
  -webkit-flex:0 1 2em;
  flex:0 1;
  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");