Tengo un cuadro de búsqueda con grupos de entrada y adición de entrada.

 <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-autocompletar se utiliza para el widget de autocompletar.

Sin embargo, la alineación del menú desplegable se rompe al reducir el ancho del navegador:

1. El menú desplegable se desplaza hacia la izquierda. Está alineado con 'Buscar' y no con el elemento de entrada.
2. El grupo de entrada adjunto se representa como parte del menú desplegable y no como elemento de búsqueda. Ver imagen a continuación.

Cualquier sugerencia apreciada.