make html text input field grow as I type?

Question

I can set initial text input size in css, like so:

width: 50px;

But I would like it to grow when I type until it reaches for example 200px.

Answer 1

If you're allowed to use the ch measurement (monospaced) it completely solved what I was trying to do.

onChange(e => {
    e.target.style.width = `${e.target.length}ch`;
})

This was exactly what I needed but I'm not sure if it works for dynamic width font-families.