selectmenu not aligned to jQuery UI buttons in the same line

Question

In a 2017-child theme for WordPress I display 3 buttons and 1 selectmenu in one line using the following HTML code:

<p align="center">
        &nbsp; <button id="prevBtn" disabled>&lt;</button>

        &nbsp; <select id="gamesMenu" disabled></select>

        &nbsp; <button id="nextBtn" disabled>&gt;</button>

        &nbsp; <button id="newBtn" disabled>New game</button>
</p>

and jQuery UI 1.11.14:

var gamesMenu = $('#gamesMenu').selectmenu({ 
        disabled: true,
        select: function(e, ui) {
                updateGameBoard();
        }
});

var prevBtn = $('#prevBtn').button().click(function(e) {
        e.preventDefault();

        var menu = gamesMenu[0];
        var index = Math.max(menu.selectedIndex - 1, 0);
        menu.selectedIndex = index;
        gamesMenu.selectmenu('refresh');

        updateGameBoard();
});

var nextBtn = $('#nextBtn').button().click(function(e) {
        e.preventDefault();

        var menu = gamesMenu[0];
        var maxIndex = $('#gamesMenu option').length - 1;
        var index = Math.min(menu.selectedIndex + 1, maxIndex);
        menu.selectedIndex = index;
        gamesMenu.selectmenu('refresh');

        updateGameBoard();
});


var newBtn = $('#newBtn').button().click(function(e) {
        e.preventDefault();
        newDlg.dialog('open');
});

For some reason the selectmenu is not vertically (is it called "base line"?) aligned to the buttons - as you can see in the screenshot below (please pardon the non-latin text):

Does anybody know how to workaround the wrong alignment?

I do not use any custom CSS yet, but suspect that I need to add one now?

Answer 1

I have fixed the problem by adding custom CSS code to the wp-content/themes/twentyseventeen-child/style.css file:

.ui-selectmenu-button {
        vertical-align: middle;
}

I am not sure why it is present on the buttons, but not at the selectmenu...