title: Dynamically Adjust HTML Text Input Width to Content
body: <p>I can't quite find a clear answer on this, and excuse me if there is one I've missed.</p>
  
  <p>I want my text input widths to automatically adjust to the size of the content within them. First with placeholder text than the actual text someone inputs.</p>
  
  <p>I've created the below as an example. Currently, the boxes are far bigger than my placeholder text, causing huge amounts of white space, and it's obviously the same thing when I type in something. </p>
  
  <p>I've tried width auto, some jQuery, and twine and bubble gum I found on the internet. But nothing has worked yet. Any thoughts? Thanks!</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;span&gt;&lt;p&gt;Hello, my name is &lt;/p&gt;&lt;/span&gt;
  
  &lt;span&gt;&lt;input type="text" id="input" class="form" placeholder="name"&gt;&lt;/span&gt;
  
  &lt;span&gt;&lt;p&gt;. I am &lt;/p&gt;&lt;/span&gt;
  
  &lt;span&gt;&lt;input type="text" id="input" class="form" placeholder="age"&gt;&lt;/span&gt;
  
      &lt;span&gt;&lt;p&gt; years old.&lt;/p&gt;&lt;/span&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.form {
      border: 0;
      text-align: center;
      outline: none;
  }
  
  span {
      display: inline-block;
  }
  
  p {
      font-family: arial;
  }
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/yug04jau/" rel="noreferrer">Fiddle</a></strong></p>