title: Sizing textarea height according to content with baseline same as input tags within an html table
body: <p>I have inline forms that are displayed as rows in an html table. Each input in those form is an input tag, however a few longer ones use textareas. So that looks like something like this (top one being a textarea, bottom being an input).</p>
  <p><a href="https://i.stack.imgur.com/5MnOn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5MnOn.png" alt="enter image description here" /></a></p>
  <p>In that case it looks fine, however a lot of the description may be empty, or have only a few words. However the textarea doesn't adjust to the (initial) content:</p>
  <p><a href="https://i.stack.imgur.com/DyBBq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DyBBq.png" alt="enter image description here" /></a></p>
  <p>I <em>don't</em> need this do automatically resize along with use input. However I do need it to have, initially, the ~same height as the input tags when possible. Such as:</p>
  <p><a href="https://i.stack.imgur.com/LYyLc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LYyLc.png" alt="enter image description here" /></a></p>
  <p>sample html:</p>
  <pre><code>&lt;table class=&quot;table table-bordered dbase-table&quot; id=&quot;bottom_product_form&quot; width=&quot;100%&quot; cellspacing=&quot;0&quot;&gt;
      &lt;caption style=&quot;caption-side:top&quot;&gt;Products&lt;/caption&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th class=&quot;narrow&quot;&gt;Product&lt;/th&gt;
              &lt;th class=&quot;wider&quot;&gt;Description&lt;/th&gt;
              &lt;th class=&quot;narrow&quot;&gt;Order&lt;/th&gt;
              &lt;th class=&quot;narrow&quot;&gt;BO&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody id=&quot;details_form&quot;&gt;
          &lt;tr&gt;
              &lt;td class=&quot;&quot;&gt;
                  &lt;input type=&quot;text&quot; name=&quot;details-0-no_prod&quot; value=&quot;7164&quot; maxlength=&quot;30&quot; readonly=&quot;True&quot; class=&quot;readonly&quot; id=&quot;id_details-0-no_prod&quot;&gt;
              &lt;/td&gt;
              &lt;td  class=&quot;td_fit&quot;&gt;
                  &lt;textarea class=&quot;input-fit&quot; type=&quot;text&quot; name=&quot;details-0-tmp_desc&quot; maxlength=&quot;60&quot; id=&quot;id_details-0-tmp_desc&quot;&gt;this is fine&lt;/textarea&gt;
              &lt;/td&gt;
              &lt;td  class=&quot;&quot;&gt;
                  &lt;input type=&quot;number&quot; name=&quot;details-0-qte_cmd&quot; value=&quot;1&quot; id=&quot;id_details-0-qte_cmd&quot;&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;input type=&quot;number&quot; name=&quot;details-0-qte_bo&quot; value=&quot;0&quot; readonly=&quot;True&quot; class=&quot;readonly&quot; id=&quot;id_details-0-qte_bo&quot;&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  <p>With the code below, sure I can set the height of the text-are to be ~ that of the input. However if there's more input in the table, height stays the same and it ends up hidden.</p>
  <p>css:</p>
  <pre><code>table {
    background-color: gray;
  }
  textarea {
  /*    line-height:0.3rem; */
    height:1rem;
    max-height:3rem;
  }
  </code></pre>