bootstrap - make input stretch when hiding sidebar - css

Question

How to make the text input stretch as well when hiding sidebar?
Look at example on jsFIDDLE
html:
<div class="container-fluid">
<div class="row">
<div class="col-sm-10">
<div class="jumbotron">
<form role="form" method="post" class="form-inline">
<div class="form-group">
<label for="idf">Name: </label>
<input type="text" class="form-control" id="idf" aria-describedby="h">
<span id="h" class="help-block"></span>
</div>
<div class="form-group" id="tt">
<label for="ida">Tested:</label>
</div>
<div class="form-group" id="cc">
<input type="checkbox" id="ida">
</div>
<div class="form-group" id="bb">
<button type="submit" class="btn btn-success"><i class="fa fa-check fa-lg"></i></button>
<button type="button" class="btn btn-danger"><i class="fa fa-close fa-lg"></i></button>
</div>
<div style="clear: both">/div>
</form>
</div>
</div>
</div>
</div>
css:
.container-fluid .jumbotron {padding: 20px 0 10px 15px}
.btn {width: 40px; height: 28px; line-height:10px;}
#tt {margin-left: 20px; padding-top: 3px; height:38px;}
#cc {margin-left: 5px; height:38px}
#bb {margin-right: 20px; float:right}
When you hide the sidebar you will see the content moving to the left. There is one text input and I don't know how to make that input stretch with jumbotron. I'd like to be able set the min width as well.
Second question: is there a better way to make all elements inline and horizontally aligned? I had to separate checkbox from label and do it as you can see.

Answer 1

I found some information in other sources and put it all together. It seems to be working fine. So far nobody was able to answer my question (it isn't that simple), but still if someone knows a better way and cleaner of doing this, I'd like to learn how to do it better. This is what I did:
html:
<div class="jumbotron">
<form role="form" method="post" class="form-inline">
<div id="cell-1">
<label for="idf">Name:</label>
</div>
<div class="form-group" id="cell-2">
<input type="text" class="form-control" id="idf" aria-describedby="h" style="width:100%">
<span id="h" class="help-block">Warning: this field can't be empty!</span>
</div>
<div id="cell-3">
<div class="form-group" id="tt">
<label for="ida">Tested:</label>
</div>
<div class="form-group" id="cc">
<input type="checkbox" id="ida">
</div>
<div class="form-group" id="bb">
<button type="submit" class="btn btn-success"><i class="fa fa-check fa-lg"></i></button>
<button type="button" class="btn btn-danger"><i class="fa fa-close fa-lg"></i></button>
</div>
<div style="clear: both"></div>
</div>
</form>
</div>
css:
.container-fluid .jumbotron {padding: 20px 0 10px 15px}
#cell-1 {display: table-cell; vertical-align:top; padding-top:7px}
#cell-2 {display: table-cell; width:50%; padding-left:5px}
#cell-3 {display: table-cell; width:50%}
.btn {width: 40px; height: 28px; line-height:10px;}
#tt {margin-left: 20px; padding-top: 7px; height:38px;}
#cc {margin-left: 5px; padding-top: 4px; height:38px}
#bb {margin-right: 20px; padding-top: 4px; float:right}
.help-block {font-size: 12px;color:red}
Updated example on jsFIDDLE.