Dynamic width of input depending on value?

Question

css

Good evening! Please tell me a recipe with which you can implement (if possible) the dynamic width of the input depending on the values. The fact is that due to the specifics of the design, I cannot set a fixed width, and attempts with inline-block, max-width: 100% do not roll) I seem to be no longer a beginner in layout for a long time, but I could not do such a task decide.
Okay there with the design, now I'm wondering how to do it.
For example, I'm making a title that can be changed and saved when clicked, all without reloading (of course, input).
This input has a minimum width (with an empty value) of 100px. But when I enter and save already sentences, for example, "Good morning Petrovich!", But the text goes beyond the input and turns out to be cut off.
How can this be implemented?

Answer 1

If you use JavaScript to send data, then the inputs can be replaced with contenteditable
https://jsfiddle.net/do8Lq0u9/