Bootstrap text field next to other inputs, using whole width - css

Question

I want to have a form, containing a checkbox, a textfield and a button, with textfield taking as much width as available.
Is that possible?
<form>
<input type="checkbox">
<input class='form-control'>
<button class="btn btn-danger pull-right">
<i class="glyphicon glyphicon-minus"></i>
</button>
</form>
Here's a codepen with my (failed) intent
EDIT: Changed my question to not require form-inline to achieve the same result

Answer 1

You can use calc() in input="text" and according to Bootstrap Docs Examples the button would be a sibling of form-group and not a child as you have.
Remember that .form-inline only applies to forms within viewports that are at least 768px wide. So you need to see full-page of the snippet.
.form-group {
border: red solid
}
input[type="text"] {
width: calc(100% - 17px)
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline">
<div class="form-group">
<input type="checkbox">
<input type="text" placeholder="textfield">
</div>
<button type="submit" class="btn btn-default">
Remove<i class="glyphicon glyphicon-minus"></i>
</button>
</form>
UPDATE (based on your updated question) - that you want the same outcome even for smaller screen - therefore don't require form-inline)
I'll say lets keep form-inline but make button child of form-group instead of sibling (as I had earlier in my answer - and as it should be accordingly to Bootstrap Docs Examples)
.form-group {
border: red solid
}
#f1 input[type="text"] {
width: calc(100% - 113px) /* regular button */
}
#f2 input[type="text"] {
width: calc(100% - 101px) /* small button */
}
#f3 input[type="text"] {
width: calc(100% - 91px) /* extra small button */
}
#f4 input[type="text"] {
width: calc(100% - 141px) /* large button */
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<form id="f1" class="form-inline">
<div class="form-group">
<input type="checkbox">
<input type="text" placeholder="textfield">
<button type="submit" class="btn btn-default">
Remove<i class="glyphicon glyphicon-minus"></i>
</button>
</div>
</form>
<form id="f2" class="form-inline">
<div class="form-group">
<input type="checkbox">
<input type="text" placeholder="textfield">
<button type="submit" class="btn btn-sm btn-default">
Remove<i class="glyphicon glyphicon-minus"></i>
</button>
</div>
</form>
<form id="f3" class="form-inline">
<div class="form-group">
<input type="checkbox">
<input type="text" placeholder="textfield">
<button type="submit" class="btn btn-xs btn-default">
Remove<i class="glyphicon glyphicon-minus"></i>
</button>
</div>
</form>
<form id="f4" class="form-inline">
<div class="form-group">
<input type="checkbox">
<input type="text" placeholder="textfield">
<button type="submit" class="btn btn-lg btn-default">
Remove<i class="glyphicon glyphicon-minus"></i>
</button>
</div>
</form>

Answer 2

Try this:
<div class="container">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default">
<input type="checkbox">
</button>
<button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-minus"></i></button>
</div>
</div>
</div>