JSFiddle - React, Tailwind, and code Playground

HTML

<table class="users">
  <thead>
    <tr>
      <th class="row-1 row-ID">ID</th>
      <th class="row-2 row-name">Name</th>
      <th class="row-3 row-job">Job</th>
        <th class="row-4 row-email">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0001</td>
      <td>Johnny Five fdgdfgfgf</td>
      <td>Robotin'</td>
      <td class="row-4">
        <div>
           <input type="text" class="row-email" value = "[email protected]">
        </div>
      </td>
    </tr>
  </tbody>
</table>

CSS

.users {
  table-layout: auto;
  width: 100%;
  min-width: 600px;
  
}
.users td {
  border: 1px solid black;
}


/* Column widths are based on these cells */
.row-ID {
  width: 10%;
}
.row-name {
  width: 40%;
}
.row-job {
  width: 30%;
}
.row-4 {

}

td > div {
  min-width: 20vw;
  border: 1px solid red;
}

.row-email {
  width: 100%;
}