JSFiddle - React, Tailwind, and code Playground

HTML

<table class="desktopTable">
  <thead>
    <tr>
      <td></td>
      <td>First column</td>
      <td>Second column</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Side row 1</td>
      <td>Lorem ipsum 1</td>
      <td>Lorem ipsum 1</td>
    </tr>
    <tr>
      <td>Side row 2</td>
      <td>Lorem ipsum 2</td>
      <td>Lorem ipsum 2</td>
    </tr>
  </tbody>
</table>
<table class="mobileTable">
   <thead>
     <tr>
        <td colspan="2">First column</td>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>Side row 1</td>
       <td>Lorem ipsum 1</td>
     </tr>
     <tr>
       <td>Side row 2</td>
       <td>Lorem ipsum 1</td>
     </tr>
   </tbody>
</table>
<table class="mobileTable">
   <thead>
     <tr>
        <td colspan="2">Second column</td>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>Side row 1</td>
       <td>Lorem ipsum 2</td>
     </tr>
     <tr>
       <td>Side row 2</td>
       <td>Lorem ipsum 2</td>
     </tr>
   </tbody>
</table>

CSS

table {
  border-spacing: 0px;
  margin: 5px;
}

table td {
  min-width: 150px;
  padding: 5px;
  text-align: center;
}

table thead td {
  background: grey;
  color: white;
  border: 1px solid black;
}

table tbody td {
  border: 1px solid grey;
}

.mobileTable {
  display: none;
}

@media (max-width: 600px) {
  .desktopTable {
    display: none;
  }
  .mobileTable {
    display: block;
  }
}