I ran into an issue while attempting to place two input elements side by side, with a prefixed item on the first input, using display:table styles. Unfortunately, the second input element ends up overlapping the first. I tried using box-sizing: border-box but it didn't solve the problem. It seems like the width of the parent div is restricting the inputs and setting the width of the input element to 100% is not working as expected. Here's an example in JSfiddle:
HTML
<div class="container">
<div class="row">
<div class="cell input-prepend">
<span class="add-on">HI</span>
<input type="text" />
</div>
<div class="cell">
<input type="number"/>
</div>
</div>
</div>
CSS
@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;
}
The aim is to create multiple rows similar to the above where each text input has a label that may vary in width. I need to ensure that all text inputs align properly. Should I abandon the prepended element approach and use a separate div instead?