JSFiddle - React, Tailwind, and code Playground

by lebbe

HTML

<table>
<tbody>
  <tr>
    <td>
      Text
    </td>
    <td>
       <input>
    </td>
    <td>
       <input>
    </td>
  </tr>
</tbody>
</table>

CSS

td {
  vertical-align: baseline;
}


input {
  display: block;
}

JavaScript

/*

Safari Version 10.1.1 (12603.2.4)

Combining td with vertical-align: baseline and input-element with display: block.

When input element is rendered on page load, box is not aligned with baseline.

After user enters input in box, box is aligned with baseline.

Height of table row is also larger than necessary before user enters text.

*/