JSFiddle - React, Tailwind, and code Playground

by johnmutuma5

HTML

<table width="100%">
  <tbody>
    <tr>
      <td>
        <div class="justify-me-left">me to left</div>
      </td>
      <td>
        <div class="center-me">center me</div>
      </td>
      <td>
        <div class="justify-me-right">me to right</div>
      </td>
    </tr>
  </tbody>
</table>

CSS

td {
  background: pink;
  height: 50px;
  text-align: right;
}

td div {
  display: flex;
  width: 50%;
  height: 32px;
  background: magenta;
  justify-content: center;
  align-items: center;
}

td div.justify-me-left {
  margin: auto auto auto 0;
}

td div.center-me {
  margin: auto;
}

td div.justify-me-right {
  margin: auto 0 auto auto;
}