My goal is to create an inline form within a small container (.col-sm-4) without it wrapping into multiple lines. I want the inputs to adjust to the column size while also having the button in the desired position. To achieve this, I have managed to remove the min-width of the inputs but struggle with placing the button correctly. Here is the design I am aiming for:
You can view my progress and code on JSFiddle.
HTML:
<div class="col-xs-4 well">
<div class="col-xs-7 form-col" id="input-dynamic">
<input type="text"></input>
</div>
<div class="col-xs-4 form-col" id="input-dynamic">
<div class="input-group-addon">$</div>
<input type="number"></input>
</div>
<div class="col-xs-1 form-col" id="input-dynamic">
<button class="btn btn-danger">-</button>
</div>
</div>
CSS:
#input-dynamic input[type=text] {
width: 100%;
box-sizing: border-box;
height: 28px;
}
#input-dynamic input[type=number] {
width: 100%;
box-sizing: border-box;
height: 28px;
}
#input-dynamic button {
width: 100%;
box-sizing: border-box;
height: 28px;
}
.form-col {
padding-right: 2px;
padding-left: 2px;
}