HTML being pushed to a second line on nav bar - html

Question

I'm trying to create a navbar header with a logo on the left, search box in the center, and a small menu on the right similar to Reverb's. Here:
I've gotten it pretty close but for some reason, my menu is being pushed down to a second line because my search bar is too long.
I've tried putting in the row and breaking the sections up into smaller col-sm-4 divs, but that messes things up more (FYI, I'm using Bootstrap 4).
Here is my html. Haven't done really any CSS other than change the default colors.
<header class="header">
<nav class="navbar navbar-expand-sm fixed top mb-3">
<div class="container">
<a href="#" class="navbar-brand">
NAVBAR
</a>
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
By
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">User name</a>
<a class="dropdown-item" href="#">Member type</a>
<a class="dropdown-item" href="#">Company</a>
<a class="dropdown-item" href="#">Genre</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with dropdown button" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-bell-o" aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-user" aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</nav>
</header>

Answer 1

If your goal is to keep the icons to the right of the search from wrapping, then you could try something like this:
ul.justify-content-end {
min-width:200px;
}