JSFiddle - React, Tailwind, and code Playground

HTML

<div id = "a1" class="element alkalimetal">
            <!-- <p>
                <span id = "anumber">118</span>
                <span id = "amass">9.008</span>
            </p> -->
            <br>
            <div id = "symbol">H</div>
  </div>
       <div id = "a2" class = "element noblegas">

       </div>

CSS

#symbol{
    width:1200px;
    font-family: AvenirCondensed;
    text-align:center;
    margin: 0 auto;
    display:table-cell;
    vertical-align:center;
}
.element{
    border: 1px solid black;
    border-radius: 3px;
    height: 70px;
    width: 70px;
}