align jqueryui's button and selectmenu - jquery-ui

Question

I have created a select menu next to a button. I wonder how can I get the select menu be at the same Y of the button? (Ideally I would like it to be of the same height too but that is another thing I guess...)
As the shown code I have no configuration other than the select width:
HTML:
<div>
<button>button</button>
<select>
<option>nacho</option>
<option>tama</option>
</select>
</div>
jqueryui JS
$('button').button();
$('select').selectmenu({
width: 120 // Needed to show see options
});
Current Result:
Fiddle that show the problem: https://jsfiddle.net/9xv7jqn4/2/
Is this a bug or a setting I am missing? Any help is appreciated
EDIT:
Thank you for the answers, I am still testing them in my code... I am also interested in know why this happens? Why the selectemenu is taking more space than it looks? Is this a bug of selectmenu widget?

Answer 1

Maybe with this css:
display: inline-flex;
vertical-align: middle;
Your fiddle with the changes: https://jsfiddle.net/9xv7jqn4/3/

Answer 2

Based on thread: "jQuery ui selectmenu vertical position offset (relatively to buttons in this line) " and suggestions here too I ended up adding a couple of rules that fix my case.
I don't know why but ui-selectmenu-button is not vertical-aligned as other buttons. Also decreased the padding of inner text so it looks almost (not exactly) the same height as other buttons.
.ui-selectmenu-button {
vertical-align: middle;
}
.ui-selectmenu-button .ui-selectmenu-text {
padding-top: 0.3em; padding-bottom: 0.3em;
}

Answer 3

You can use
vertical-align: top;
for your button like here: https://jsfiddle.net/9xv7jqn4/4/
$('button').button();
$('select').selectmenu({width: 120});
div,
button,
select{
border: thin dotted red;
}
span {
border: thin dotted blue;
}
.one{
vertical-align: top;
}
<div>
<button class='one'>button</button>
<select>
<option>nacho</option>
<option>tama</option>
</select>
</div>

Answer 4

Another good option is to add wrappers like here: https://jsfiddle.net/9xv7jqn4/6/
$('button').button();
$('select').selectmenu({width: 120});
div,
button,
select{
border: thin dotted red;
}
span {
border: thin dotted blue;
}
.w{
display:inline-block;
vertical-align: middle;
}
<div>
<div class='w'>
<button>button</button>
</div>
<div class='w'>
<select>
<option>nacho</option>
<option>tama</option>
</select>
</div>
</div>