Issue with datalist, needs to be displayed underneath input field instead of to the right side of it

Question

So I am pretty new to Angular and I have been trying a lot of things to change the style of how the options in my datalist are being displayed... They are being shown in the correct format and everything, it's only the fact that they are placed to the right side of my search field where I look for contact persons instead of underneath it.

This is my current code:

    <datalist id="listContactPersonNavbar">
  <ng-container *ngFor="let cp of contactPersons; trackBy: trackByContactPersonId">
    <option [value]="cp.name"> {{cp.customerName}}</option>
  </ng-container>
</datalist>



<li class="nav-item">
        <div ngbDropdown placement="bottom-start" display="dynamic" #myDrop="ngbDropdown">
          <a
            class="contactPersons nav-link far fa-users navbarHeader pointer"
            id="dropdownForm2"
            ngbDropdownToggle
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false"
          >
          </a>
          <div
            ngbDropdownMenu
            aria-labelledby="dropdownForm2"
            style="padding: unset; width: 27rem;"
          >
            <!--            //Visuelle box af søgningen -->
            <div>
                <input
                  class="form-control"
                  type="text"
                  id="contactPersonSearch"
                  placeholder="Søg efter kontaktperson..."
                  (change)="selectContactPerson($event.target);myDrop.close()"
                  (focus)="selectContactPerson($event.target)"
                  (blur)="selectContactPerson($event.target)"
                  (keydown.enter)="selectContactPerson($event.target)"
                  list="listContactPersonNavbar"
                />
            </div>
          </div>
        </div>
      </li>

In advance thanks for the help, please keep in midn that I am new to Angular!