HTML Input field - create rows within the field

Question

I currently have an input field within an HTML table. In most cases this field is optional and not used, in some cases there will be a lot of descriptive text. Currently the field goes across the input field and the user can't see the full input. I'm looking to display the information over rows within the inout if required.

<td>
   <input class="changeReasonInput" value="{{row.reasonForChange}}">
</td>

reasonForChange field is optional, or will have a lot of text.

.changeReasonInput{
  display: inline;
  flex-basis: auto;
}

I have tried using different css techniques, but I can't seem to get the text to go over more than one line.