title: Twitter bootstrap - prepended input elements overlapping when placed next to each other
body: <p>I'm trying to put two input elements next to each other, with a prepended item on the first input, using display:table styles. However, this results in the second input element overlapping the first. I've tried using box-sizing: border-box with no luck. It seems like the problem is that I'm constraining the width of the parent div and then setting the width of the input element to 100% so that it fills up the parent, but this doesn't work at all. Here is a JSfiddle example:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="cell input-prepend"&gt;
              &lt;span class="add-on"&gt;HI&lt;/span&gt;
              &lt;input type="text" /&gt;
          &lt;/div&gt;
          &lt;div class="cell"&gt;
              &lt;input type="number"/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
  
  .container {
      margin-top: 10px;
  }
  
  .row {
      display: table-row;
      width: 100px;
  }
  
  input[type=text] {
      width: 100%;
  }
  
  .cell {
      display: table-cell;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/5pgPY/7/" rel="nofollow">http://jsfiddle.net/5pgPY/7/</a></p>
  
  <p>The goal is to get a bunch of rows like the above where each instance of the text input has some label which might not be the same width, so I need some way to make sure that the text inputs all line up. Maybe I should just give up on using the prepended element and use a separate div for that?</p>