bootstrap input-group with select2 and css positioning - html

Question

I'm trying to create a search box with a "drop down box" after the user insert search query into the input. It will make an ajax call and then create a drop down with some results.
I'm having some troubles using boostrap to do that.
Basically I want a structure like:
[CLOSE BUTTON][SELECT2][INPUT][SEARCHBTN]
The form is ready and working but I have two problems:
1- The select2 doesnt combine with input-group. If I insert it into input-group, it doesnt fit at all. The below code is what I have that works minimally, but it doesn't show like an input-group from bootstrap. It's showing as a separate select2. I'd like to make them seems the same "input".
2- I can't work in CSS to show a box with the results. It shows the results without box and in wrong scheme.
<div id="page-header-search" class="overlay-header">
<div class="content-header content-header-fullrow">
<form action="/search/" method="post" id="search-query" name="search-query">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-secondary" data-toggle="layout" data-action="header_search_off">
<i class="fa fa-times"></i>
</button>
</span>
<select class="js-select2 form-control input-group.input-group-sm" id="search_category" name="search_category" style="width: 10%;" data-placeholder="Choose one..">
<option></option>
<?php ListMainCategories($link); ?>
</select>
<input type="text" class="form-control" placeholder="Search or hit ESC.." id="search_text" name="search_text">
<span class="input-group-btn">
<button type="submit" class="btn btn-secondary">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<div class="input-group" id="resultados">
<div class="results" id="results"></div>
</div>
</form>
</div>
.resultados .results{
position:relative;
width: 100%;
color: #313131;
font-family: Rubik, sans-serif;
font-weight: 300
}
.resultados .results a{
position: relative;
float: left;
width: 100%;
border-bottom:1px solid #E0E0E0;
background-color: #ebebec;
list-style-type: none;
margin: 0px;
transition: all 275ms ease-in-out;
display: block;
cursor:pointer;
top: 0px;
right: 0px;
text-align: left;
/*border-radius: 40px;*/
transition: .5s ease-out;
padding-left: 20px;
}
How can I make changes to get a good result?
How can I make the box with results seems an extension of the search input?
I can't get it working.