Select2 dropdown goes below main dropdown

Question

I'm using a select2 dropdown that fetches data from backend which works okay. However the design of the website is custom and I'm using it on top of custom searchbox, as you can see on image:

Select2 dropdown goes below my main searchbox. I want to write search criteria in the upper input instead of the dropdown below it. I tried adding minimumResultsForSearch: -1 property to my select2 declaration but that only hides the searchbar below, making it impossible to write any criteria at all. Here's my HTML:

<div class="row g-0 justify-content-center">
    <form class="col-12 col-sm-11 col-md-10 col-lg-7 main-search">
        <div class="input-group">
            <select class="form-control" id="search-box">
                <option value="0" selected="selected">Search...</option>
            </select>
            <button class="btn btn-primary" type="button">Search</button>
        </div>
    </form>
</div>

Answer 1

That's the default setting for select2, to change it you could do the following :

$(".js-example-basic-single").select2({
  placeholder: 'Search your favourite movie'
});

.js-example-basic-single {
  width: 200px;
}

.select2.select2-container {
  top: -4px;
}

.select2.select2-container .select2-selection--single {
  height: 50px;
  border-radius: 0;
}

.select2.select2-container .select2-selection--single:focus {
  outline: none;
}

.select2.select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 50px;
}

.select2.select2-container .select2-selection--single .select2-selection__arrow {
  display: none;
}

.select2-container--default.select2-container--open {
  top: 6px !important;
}

.select2-container--default .select2-dropdown--below {
  top: -4px;
}

.select2-container--default .select2-search--dropdown {
  padding: 0;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  height: 48px;
  border: 0;
  border-bottom: 1px solid #aaa;
  padding: 10px;
  box-sizing: border-box;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="js-example-basic-single" name="state">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>