JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>display:grid</td>
      <td>rocks</td>
      <td>for tr</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Ктулху</td>
      <td>всех</td>
      <td>ЗОХАВАИТ</td>
    </tr>
  </tbody>
</table>

CSS

table {
  border: 1px solid gray;
  border-collapse: collapse;
}
tr {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 3rem 1fr 1fr;
  grid-gap: 0;
  border-bottom: 1px solid gray;
  align-items: center;
}
td {
  text-align: center;
  display: block;
  padding: 0.25rem 0.5rem;
}
tr:hover {background: yellow;}
td:first-child {
  grid-row: 1 / 3;
  grid-column: 1;
  width: 2rem;
}
td:nth-child(2) {
  grid-row: 1;
  grid-column: 2/4;
}
td:nth-child(3) {
  grid-row: 2;
  grid-column: 2;
}
td:last-child {
  grid-row: 2;
  grid-column: 3;
}