title: How do I make a text <input> tag as long as the div containing it?
body: <p>I have a form input with a label next to it, like this:</p>
  
  <pre><code>&lt;div id="loginbox"&gt;
      &lt;form&gt;
          &lt;div&gt;
              &lt;span&gt;Username&lt;/span&gt;
              &lt;input type="text"&gt;
          &lt;/div&gt;
  
          &lt;div&gt;
              &lt;span&gt;Password&lt;/span&gt;
              &lt;input type="password"&gt;
          &lt;/div&gt;
  
          &lt;div&gt;
              &lt;input type="submit" value="Login"&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Then I have some CSS that sets up the width of the login box and the span fields, like so:</p>
  
  <pre><code>#loginbox {
      border: 1px solid black;
      width: 300px;
  }
  
  #loginbox span {
      display: inline-block;
      width: 80px;
      text-align: right;
  }
  </code></pre>
  
  <p>Here is the jsfiddle for this code:</p>
  
  <p><a href="http://jsfiddle.net/7TNNq/" rel="nofollow">http://jsfiddle.net/7TNNq/</a></p>
  
  <p>Notice how the input boxes do not span the entire length of the div. How do I get it to expand fully?</p>