#navbarMenu .form-inline {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

… should do the trick.

or, using Bootstrap flex utility classes:

<form class="d-flex align-items-center flex-nowrap">

But, to also resolve the border-radius issue, you might want to change your markup to:

<form class="form-inline my-2 my-lg-0">
  <div class="input-group">
    <input class="form-control" id="address-bar" type="search" placeholder="Search" aria-label="Search">
    <div class="input-group-append">
       <button class="btn btn-outline-light" type="submit">Search</button>
    </div>
  </div>
</form>

Make sure the <button> is display:inline-block. And your input has max-width:100% instead of width:100%.

Also your .ap-dropdown-menu isn’t Z-indexed properly above the map.

using Bootstrap:

wrap your <span> where search is and button with <div class="d-flex"></div>, and add to <span> class mr-2 for space you want.

Should be something like this:

<div class="d-flex">
<span class="algolia-places mr-2" style="position: relative; display: inline-block; direction: ltr;"> *other your code* </span>
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</div>

and

result

I’m building a little website (link) which displays a search bar in the navigation bar. I’m using Bootstrap 4 for the navigation bar controls, and Algolia Places for the search bar HTML input element. The problem is that I cannot align the search bar with the search button, even though I’m using form-inline. Also, the search results displayed when typing something in the search bar get cut off.

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a href="/" class="navbar-brand">Drinking Fountains</a>

  <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
    <span class="navbar-toggler-icon"></span> 
  </button>

  <div class="collapse navbar-collapse" id="navbarMenu">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="/">Map
          <span class="sr-only">(current)</span>
        </a>
      </li>  
      <li class="nav-item">
        <a class="nav-link" href="/faq">FAQ</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/contact">Contact</a>
      </li>
    </ul>         

    <form class="form-inline my-2 my-lg-0">
      <input class="mr-sm-2"  id="address-bar" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
    </form>              
  </div>
</nav>