Bootstrap 3 Autosizing Inline Inputs with Small Column - html

Question

I am attempting to create an inline form within a small container (.col-sm-4). Using a default inline form at this size automatically wraps into multiple lines, which I would like to avoid. The look I am aiming for is here:
At this point I have gotten the inputs to throw out their min-width and instead adhere to their bounding columns, but I cannot get the button in the spot I want it (and autosizing with the overarching container).
JSFiddle Here
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;
}

Answer 1

Kfriede, Hi there. You said you want to avoid the form items from stacking.
Here is a Fiddle that will do that for the form.
But just because of the still having it to be used properly on a very small screen.
I added a media breakpoint at 320px to drop the button down below and expand the two inputs to take up 50% width each.
Hope this can help you get started here with this form.
<form class="row-fluid">
<input type="text" class="input-style col-xxs-6 col-xs-4 " id="exampleInputName2" placeholder="Name">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="col-xxs-6 col-xs-5 input-block">
<div class="input-addon input-height col-xs-2">$</div>
<input type="text" class="input-style col-xs-8" id="exampleInputAmount" placeholder="Amount">
</div>
<div class=" col-xxs-12 col-xs-3">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</form>

Answer 2

I forked your JSFiddle.
I Implemented the inline-form techniques discussed here.
And built some of the elements using this Bootstrap form builder. If you google Bootstrap form builder you will see many similar ones.
I also noticed you didn't add all the external resources to the JSFiddle so I did that as well.
If you have a really really small screen it gets scrunched but you could use a media query as discussed HERE to change the layout for a small width.
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<form class="form-inline">
<div class="form-group">
<div class="row">
<div class="col-xs-6">
<input id="textinput" name="textinput" type="text" class="form-control input-md"></div>
<div class="col-xs-6"><div class="input-group"> <span class="input-group-addon">$</span>
<input id="prependedtext" name="prependedtext" class="form-control" placeholder="Amount" type="text"> <span class="input-group-btn">
<button class="btn btn-danger" type="button">-</button>
</span>
</div>
</div>
</div>
</form>
</div>
</div>
</div>