JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Input field height test case</h1>
<table>
  <tr>
    <td>
      Regular input
    </td>
    <td>
      <input value="Put your editable text here, please." />
    </td>
  </tr>
  <tr>
    <td>
      Span with font-size 25px
    </td>
    <td>
      <span contenteditable>Put your editable text here, please.</span>
    </td>
  </tr>
  <tr>
    <td>
      Span with font-size 20px
    </td>
    <td>
      <span contenteditable>Put your editable text here, please.</span>
    </td>
  </tr>
  <tr>
    <td>
      Span with font-size 15px
    </td>
    <td>
      <span contenteditable>Put your editable text here, please.</span>
    </td>
  </tr>
  <tr>
    <td>
      Span with font-size 10px
    </td>
    <td>
      <span contenteditable>Put your editable text here, please.</span>
    </td>
  </tr>
</table>
<p>As you can see, the regular input tag has some drawbacks. It doesn't stretch with its content, and its height isn't 28px.</p>
<p>The editable span tags, on the other hand, are exactly 28px high, they can stretch <strong>and</strong> they can wrap text if necessary</p>

CSS

td:first-child{
  padding-right: .5em;
}

input{
  padding: 0;
  border: none;
}

input, span{
  display: inline-block;
  min-width: 6em;
  font-size: 25px;
  line-height: 1;
  padding: calc(-.5em + 14px) 0;
  font-family: arial, sans-serif;
  background: #FFF;
  border-radius: 3px;
  overflow: hidden;
}

input:focus, span:focus{
  outline: none;
  box-shadow: 0 0 1px 1px #25E;
}

tr:nth-child(3) span{
  font-size: 20px;
}

tr:nth-child(4) span{
  font-size: 15px;
}

tr:nth-child(5) span{
  font-size: 10px;
}