Html - Aligning search bar for mobile and desktop with bootstrap 3

Aligning search bar for mobile and desktop with bootstrap 3.3

I want my search box to appear in the nav bar on the desktop and in mobile. Currently, when I reduce the width, the search bar drops to the next line. I can't figure out how to keep it flush with the nav bar.

I was able to accomplish the desired affect by inserting a second search box within the 'navbar-header' section, but that caused by typeahead code to go crazy.

Here's the header section of my HTML:

Any guidance would be appreciated.

References

Other people have had similar questions but they all seem a little different, in large part because there isn't a super-standard way to do this, and because people want their web pages to behave in different ways.

[update] updated css in plunkr to show that the nav bar stretches across the top in a different background color.