Multiple lines of input in <input type="text" />

Check this:

http://www.w3.org/TR/html401/interact/forms.html#h-17.7

The TEXTAREA element creates a multi-line text input control

You should use textarea to support multiple-line inputs.

<textarea rows="4" cols="50">
Here you can write some text to display in the textarea as the default text
</textarea>

Use <div contenteditable="true"> (supported well) with storing to <input type="hidden">.

HTML:

<div id="multilineinput" contenteditable="true"></div>
<input type="hidden" id="detailsfield" name="detailsfield">

jQuery:

$("#multilineinput").on('keyup',function(e) {   
    $("#detailsfield").val($(this).text()); //store content to input[type=hidden]
});
//optional - one line but wrap it
$("#multilineinput").on('keypress',function(e) {    
    if(e.which == 13) { //on enter
        e.preventDefault(); //disallow newlines     
        // here comes your code to submit
    }
});

If you're using React, you could use the 3rd-party UI library MUI. It has a custom proprietary <Input> element with a multiline option.

As LSE commented, ultimately it gets rendered as <textarea>.

  <FormControl>
    <InputLabel htmlFor="textContract">{`textContract`}</InputLabel>
    <Input
      id="textContract"
      multiline
      rows="30"
      type="text"
      value={props.textContract}
      onChange={() => {}}
    />
  </FormControl>

https://material-ui.com/components/text-fields/#multiline

If you don't need to edit it, you can use a

text here

It will expand with the text.