title: How do make a variable-width input field
body: <p>I am trying to make the label and input field appear on the same line, with a variable width input field that will expand based on the space available</p>
  
  <p><a href="http://jsfiddle.net/chovy/WcQ6J/" rel="nofollow">http://jsfiddle.net/chovy/WcQ6J/</a></p>
  
  <pre><code>&lt;div class="clearfix"&gt;
      &lt;aside&gt;foo&lt;/aside&gt;
      &lt;span&gt;&lt;input type="text" value="Enter text" /&gt;&lt;/span&gt;
  &lt;/div&gt;
  
  .clearfix {
    *zoom: 1;
  }
  
  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  .clearfix:after {
      clear: both;
  }
  
  div {
      border: 1px solid red;
  }
  
  aside {
      display: block;
      width: 100px;
      background: #eee;
      float: left;
  }
  
  span {
      display: block;
      width: 100%;
      background: #ccc;
  }
  
  input {
      width: 100%;
      box-sizing: border-box;
      border: 1px solid #000;
  }
  </code></pre>
  
  <p>It works fine with a span, but when I add input it wraps to next line.</p>