Navbar button gets pushed on second row because of form

Created by: Fatcrobe

I have a navbar with a bunch of buttons, a hidden form and a float right dropdown. Sometimes when loading the page the button named "Dropdown" will be rendered on a 2nd row and refreshing the page will either fix or break the button. Sometimes it's the opposite, the button is on the first row and refreshing the page will break it.

JSBIN: https://jsbin.com/guruzocafo/1/edit?html,output

Even though it should have no impact, declaring bootstrap.css before bootstrap.js seems to fix the issue.

I'm using a customized bootstrap with @grid-float-breakpoint set to 1px (I don't think this is related to the problem) version 3.3.5 jQuery 2.1.4