how to make a html input expand when the text inside is larger then the input itself
<p>I have a input (html element) and sometimes the input (text) from the user is larger then the width of the input (html element) is there a way to make the input (html element) auto grow when the user is typing?</p>

<p>Obs. Better if made only with css </p>

<p>-------------------------------------EDIT 1-----------------------------------</p>

<p>I've made a <a href="https://jsfiddle.net/Supitto/2rpctygh/1/" rel="nofollow">JSfiddle</a>, and as you can see the text is cropped when you enter to much text. I'm now trying to make it work with <code>&lt;span contenteditable="true" &gt;</code></p>