title: How can I make a fluid text input using react, which resizes based on the content?
body: <p>I'm trying to achieve this functionality:
  <a href="https://paper.fiftythree.com/search" rel="nofollow">https://paper.fiftythree.com/search</a></p>
  
  <p>The input box should expand till a max-width based on the content inside.
  I'm using React by Facebook to do this via state so render gets called automatically.</p>
  
  <p>I've put together a small fiddle using span - but couldn't take it through:
  <a href="http://jsfiddle.net/abhinavsingi/3az621c2/" rel="nofollow">http://jsfiddle.net/abhinavsingi/3az621c2/</a></p>
  
  <pre><code>var Hello = React.createClass({
                  getInitialState: function(){
                      return {
                        name: 'hello'
                      };
                  },
                  render: function() {
                      return (
                          &lt;div className="cont"&gt;
                             &lt;span className="spacer-wrap"&gt;
                                &lt;span className="spacer"&gt;{this.state.name}&lt;/span&gt;
                             &lt;/span&gt;
                             &lt;input ref='name' id="nm-inp" className="input-wrap" value={this.state.name} onChange={this.onInputChange}/&gt;
                         &lt;/div&gt;
                      );
                  },
  
                onInputChange: function(e){
                     console.log(e);
                     this.setState({name: e.currentTarget.value})
                }
             });      React.render(&lt;Hello name="World" /&gt;, document.body);
  </code></pre>