Boostrap autocomplete alignment

I have a search box with input-prepend and input-append groups.

<div class="input-group input-group-sm">
  <div class="input-group-prepend">
    <button class="btn btn-outline-success" type="submit">Search</button>
  </div>
  <input class="form-control autocomplete" type="text" name="q" value="..." aria-label="Search" autocomplete="off">
  <div class="input-group-append barcode-scan d-none">
    <a href="#" class="btn btn-online-success input-group-text" role="button" aria-pressed="true"><i class="bi bi-upc-scan"></i></a>
  </div>
</div>

bootstrap-autocomplete is used for autocomplete widget.

However, the dropdown alignment breaks when reducing the browser width:

1. The dropdown shifts left. It's aligned with 'Search' and not the input element.
2. The appended input group is rendered as part of the dropdown and not the search element. See image below.

Any pointers appreciated.