JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row-content">
  <div class="content">
    <div class="table">
      <div class="table-cell numbers">
        <span>100.08</span>
      </div>
    </div>
  </div>
</div>

CSS

.row-content {
  float:left;
  position: relative;
  width: 8%; /* 1 divide number of columns */
  padding-bottom : 8%; /* = width for a 1:1 aspect ratio */
  margin:0.16667%; /* = (100% - (% width * columns)) / (columns * 2) */
  background-color:#1E1E1E;
  overflow:hidden;
}

.content {
  position:absolute;
  height:98%; /* = 100% - 2*10% padding */
  width:98%; /* = 100% - 2*5% padding */
  padding: 1%;

}

.table{
  display:table;
  width:100%;
  height:100%;
}

.table-cell{
  display:table-cell;
  vertical-align:middle;
}

.numbers{
  font-weight:900;
  font-size:16px;
  color:#fff;
}