JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1">
  <thead>
    <tr>
      <td class="name">name</td>
      <td class="note">note</td>
    </tr>
  </thead>
  <tbody>
    <tr class="input_area">
      <td class="name"><input type="text"/></td>
      <td class="note"><textarea></textarea></td>
    </tr>
    <tr>
      <td class="name">鈴木</td>
      <td class="note">頑張り屋さん</td>
    </tr>
  </tbody>
</table>

CSS

table {
  border-collapse: collapse;
}
.input_area td {
  background: palegreen;
  position: relative;
  height: 30px;
  width: 100px;
  padding: 0;
}

/* 試したことB */
.input_area td input {
  position: absolute;
  inset: 0 0 0 0;
}
.input_area td textarea {
  position: relative;
  height: 100%;
  width: 100px;
  max-height: 100%;
  max-width: 100px;  
}