JSFiddle - React, Tailwind, and code Playground

by Andrei Gheorghiu

HTML

<table>
  <thead>
    <tr>
      <th colspan="3">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>45</td>
      <td></td>
    </tr>
    <tr>
      <td></td><td>2</td><td></td>
    </tr>
    <tr>
      <td></td><td>0</td><td></td>
    </tr>
    <tr>
      <td></td><td>1234</td><td></td>
    </tr>
  </tbody>
</table>
<table>
  <thead>
    <tr>
      <th colspan="3">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>0</td>
      <td></td>
    </tr>
    <tr>
      <td></td><td>2</td><td></td>
    </tr>
    <tr>
      <td></td><td>1</td><td></td>
    </tr>
    <tr>
      <td></td><td>4</td><td></td>
    </tr>
  </tbody>
</table>
<table>
  <thead>
    <tr>
      <th colspan="3">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>44</td>
      <td></td>
    </tr>
    <tr>
      <td></td><td>0</td><td></td>
    </tr>
    <tr>
      <td></td><td>1155</td><td></td>
    </tr>
    <tr>
      <td></td><td>1234548775564</td><td></td>
    </tr>
  </tbody>
</table>

CSS

table {
  border: 1px solid black;
  width: 200px;
}

td {
  text-align: right;
  min-width: 10px;
}
td:first-child, td:last-child {
  width: 50%;
}

/* stacking tables side by side, not part of solution */
table {      
  float: left;
  margin-right: 20px;
}