I'm facing an issue with the search filter layout on my website. It includes input fields for a search term, two datepickers, and two buttons:
<div id="search-holder">
<div id="search-box">
<div class="form-group row">
<div class="col-lg-10 col-md-9 col-sm-9 form-group row">
<div class="col-lg-8 col-md-8 col-sm-6">
<input id="searchResident" type="text" class="form-control search-input col-md-10" data-bind="value: mainDataSearchWorker, valueUpdate: 'afterkeydown', enterkey: mainDataRefreshData" placeholder="@SharedResources.Index.SearchNurse" />
</div>
<div class="col-lg-2 col-md-2 col-sm-3">
<input id="searchIntakeDateFrom" type="text" class="form-control search-date pointer picker" data-bind="datePicker: mainDataSearchDateFrom, maxDate: mainDataSearchDateTo, valueUpdate: 'afterkeydown', enterkey: mainDataRefreshData" placeholder="@SharedResources.Index.SearchDateFrom" />
</div>
<div class="col-lg-2 col-md-2 col-sm-3">
<input id="searchIntakeDateTo" type="text" class="form-control search-date pointer picker" data-bind="datePicker: mainDataSearchDateTo, minDate: mainDataSearchDateFrom, valueUpdate: 'afterkeydown', enterkey: mainDataRefreshData" placeholder="@SharedResources.Index.SearchDateTo" />
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-3 form-group row">
<div>
<button type="button" id="search" class="btn btn-newline" data-bind="click: function() {mainDataRefreshData()}"> @SharedResources.Index.Search</button>
<button class="btn btn-sm leftmargin10" title="@SharedResources.Index.Reset" data-bind="click: function() {mainDataResetSearch()}">
<span class="fa fa-repeat"></span>
</button>
</div>
</div>
</div>
</div>
</div>
There seems to be an issue with the "searchResident" input field not fully stretching, creating empty space between the input field and datepicker field:
https://i.sstatic.net/KOWCZ.png
Is there a way to make the "searchResident" input field stretch fully to eliminate the empty space between input elements?