<table>
  <thead>
    <tr>
      <th>Type</th>
      <th>Original</th>
      <th>Transformed</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Rotated</td>
      <td><span class="icon next">👉</span></td>
      <td><span class="icon rotated">👉</span></td>
    </tr>
    <tr>
      <td>Scaled</td>
      <td><span class="icon next">👉</span></td>
      <td><span class="icon scaled">👉</span></td>
    </tr>
  </tbody>
</table>

.icon {
  display: inline-block; /* allow transforms */
  font-size: 2rem;
  line-height: 1rem;
}

.rotated {
  transform: rotate(180deg);
}

.scaled {
  transform: scaleX(-1);
}


/* layout */

body {
  font: 16px system-ui;
}

table {
  display: grid;
  grid-gap: 3rem;
  grid-template-columns: repeat(3, auto);
  margin: 3rem auto;
  max-width: 40rem;
}

thead, tbody, tr {
  display: contents;
}

th {
  text-align: left;
}