adjust the width of the input that correspond to the value length of the input
<p>I'm trying to make an auto resize like input, like when the user type in, the input will adjust automatically to fit the value inside the input but seem's I can't make it right or working. Any ideas, help please?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
  $('input').on('input',function(){
    $(this).css('width',$(this).width()+$(this).val().length );
  });
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>input{border:1px solid red;width:30px;}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;



&lt;input type="text"&gt;</code></pre>
</div>
</div>
</p>