How to make HTML text input field grow while typing with CSS?

Sometimes, we want to make HTML text input field grow while typing with CSS.

How to make HTML text input field grow, we will look at in this article while typing with CSS.

How to make HTML text input field grow while typing with CSS?

To make HTML text input field grow, we set the max-width style of a contenteditable element while typing with CSS.

span {
  border: solid 1px black;
}
div {
  max-width: 200px;
}

to set the max width of the container div to 200px.
Then we can write

<div>
  <span contenteditable="true">sdfsd</span>
</div>

so we can type in the span to add a conteteditable span inside the div.

Conclusion

To make HTML text input field grow , we set the max-width style of a contenteditable element while typing with CSS.