JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>Idque Caesaris</td>
      <td>France</td>
      <td>637</td>
    </tr>

    <tr>
      <td>2</td>
      <td>Cum ceteris</td>
      <td>Italy</td>
      <td>490</td>
    </tr>

    <tr>
      <td>3</td>
      <td>Morbi fringilla</td>
      <td>Spain</td>
      <td>211</td>
    </tr>
  </tbody>
</table>

SCSS

table {
  width: 100%;
  
  tr {
    display: flex;
    
    td {
      padding: 5px 10px;
      border-top: 1px solid #eee;
      
      &:first-child {
        width: 30px;
      }
      
      &:nth-child(2) {
        padding-right: 0;
      }
      
      &:nth-child(3) {
        font-size: 10px;
        flex: 1;
        display: flex;
        align-items: center;
      }
      
      &:last-child {
        width: 30px;
      }
    }
  }
}