title: How to align jQuery UI selectmenu with buttons?
body: <p>I've been struggling with this for a while (I'm really not experienced with jQuery UI).</p>
  
  <p>I'm trying to implement a jQuery UI that has a <a href="http://jqueryui.com/selectmenu/" rel="nofollow noreferrer">selectmenu</a> next to some regular <a href="http://jqueryui.com/button/" rel="nofollow noreferrer">buttons</a>. For some reason I can't understand, the selectmenu is mis-aligned; it's way higher up on the page than the buttons.</p>
  
  <p>Here's what it looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/y4FoC.png" alt="Screenshot of mis-aligned UI elements"></p>
  
  <p>I'm not sure if this is a bug or not, it sure looks very wrong to me. I've been struggling for quite a while now but haven't been able to figure it out.</p>
  
  <p>The markup is really very basic so I don't think it's very helpful to include it here., but it's all here: <a href="http://jsbin.com/afixij/10/edit?html,css,js,output" rel="nofollow noreferrer">http://jsbin.com/afixij/10/edit?html,css,js,output</a>. Widen the Output to see all three elements (the selectmenu, and the buttons Foo and Bar) on the same line.</p>