Question

In this jsfiddle click on the “Add Question” button in the demo so it will append a table row. The problem I have is that if you look under the “Question” column in the appended row, the textarea does not fill the height of its column. How can I get each textarea in its appended row to fill the height of its table column?

Below is part of the CSS code for this:

.question { 
    min-width:14%;
    max-width:14%;
    border:1px black solid;
    border-collapse:collapse;
}

.question textarea {
    min-width:auto;
    max-width:auto;
    resize:none;
    height:auto;
    font-size:100%;
}

Answer 1

By default, <textarea> has displayed as inline block and vertically-aligned to the baseline.
Change any of two:

.question textarea {
  display: block;

  /* or */

  vertical-align: bottom;
}

That space on the bottom is the part of line-height reserved for letters that extend below the baseline, like ‘g’ or ‘y’. So nullifying parent’s line-height will also work (not sure about Safari):

.question {
  line-height: 0;
}