Inline form make input text full width and responsive - html

Question

I have a problem when I use inline-form the input text does not take all the space.
I am aware of that information, but I am a bootstrap beginner.
Requires custom widths Inputs, selects, and textareas are 100% wide by
default in Bootstrap. To use the inline form, you'll have to set a
width on the form controls used within. The default width of 100% as
all form elements gets when they got the class form-control didn't
apply if you use the form-inline class on your form.
Cordially
<div class="panel panel-primary">
<div class="panel-heading"><h4>Search Options</h4></div>
<div class="panel-body">
<form class="form-inline">
<div class="form-group">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Account ID <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Account ID</li>
<li>Company Name</li>
<li>Account Type</li>
<li role="separator" class="divider"></li>
<li>Marketplaces</li>
</ul>
</div>
</div>
<div class="form-group">
<input class="form-control" type="text"
value="" id="filter_id" placeholder="Put your filter here">
<button type="button" class="btn btn-default"> Filtrer </button>
</div>
</form>
</div>
</div>

Answer 1

According to Docs
May require custom widths
Inputs and selects have width: 100%; applied by default in Bootstrap.
Within inline forms, we reset that to width: auto; so multiple
controls can reside on the same line. Depending on your layout,
additional custom widths may be required.
EDIT
as per your comment:
the input text take the rest of space. I want inline all the elements
in a single row and if a space is left the input text should take it
use flexbox
/* !important ONLY USED FOR SNIPPET */
.form-inline {
display: flex
}
.flex {
flex: 1;
display: flex !important
}
.flex input {
flex: 1 !important
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel panel-primary">
<div class="panel-heading">
<h4>Search Options</h4>
</div>
<div class="panel-body">
<form class="form-inline">
<div class="form-group">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Account ID <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Account ID</li>
<li>Company Name</li>
<li>Account Type</li>
<li role="separator" class="divider"></li>
<li>Marketplaces</li>
</ul>
</div>
</div>
<div class="form-group flex">
<input class="form-control" type="text" value="" id="filter_id" placeholder="Put your filter here">
<button type="button" class="btn btn-default"> Filtrer </button>
</div>
</form>
</div>
</div>

Answer 2

Add a container as a 'context' in your markup and then use it to override your css in this specific context :
<div class="special-form">
<!-- form -->
</div>
CSS
.special-form .panel .form-control {
width: 100%;
}