JSFiddle - React, Tailwind, and code Playground

by Rodwyn Moreno

HTML

<div class="race-tbl">
  <div class="race-tbl-cll">A</div>
  <div class="race-tbl-cll">B</div>
  <div class="race-tbl-cll">
    <svg class="chart" width="100%" height="19" role="img">
      <g class="bar">
        <rect width="100%" height="19" class="bar-background"></rect>
        <rect width="19%" height="19" class="bar-percent"></rect>
      </g>
    </svg>
  </div>
  <div class="race-tbl-cll">C</div>
  <div class="race-tbl-cll">AA</div>
  <div class="race-tbl-cll">BB</div>
  <div class="race-tbl-cll">
    <svg class="chart" width="100%" height="19" role="img">
      <g class="bar">
        <rect width="100%" height="19" class="bar-background"></rect>
        <rect width="19%" height="19" class="bar-percent"></rect>
      </g>
    </svg>
  </div>
  <div class="race-tbl-cll">CC</div>
  <div class="race-tbl-cll">AAA</div>
  <div class="race-tbl-cll">BBB</div>
  <div class="race-tbl-cll">
    <svg class="chart" width="100%" height="19" role="img">
      <g class="bar">
        <rect width="100%" height="19" class="bar-background"></rect>
        <rect width="39%" height="19" class="bar-percent"></rect>
      </g>
    </svg>
  </div>
  <div class="race-tbl-cll">CCC</div>
</div>

CSS

.race-tbl {
  display: grid;
  grid-template-columns: min-content min-content auto min-content;
  width: 100%;
  border: red solid thin;
}

.bar-background {
  fill: #aaa;
}

.bar-percent {
  fill: #024e87;
}