Primefaces 3.5/CSS - selectOneMenu and button vertical align

Question

In Primefaces 3.5 vertical align of p:selectOneMenu and button is weird when you put them in one line. My use case is: user chooses option from menu and then click button to activate it. Issue is - both components have to be in the same line (table row).

XHTML is really easy:

<h:form>
    <p:selectOneMenu>
        <f:selectItem itemLabel="test" itemValue="test"/>
    </p:selectOneMenu>
    <p:commandButton value="GO"/>
</h:form>

Unfortunately result is not what I expect:

My expectation is rather something line this: or

I tried to research rendered HTML code with Firebug, but honestly, it's hard for me to found any CSS margin, padding, left, top, or anything like that could help me.

Anyone struggled with such issue (and - hopefully - solved it)?

Answer 1

Solution is:

    <style type="text/css">
        .selectMenu { display: inline-block; vertical-align: top; }
    </style>
    <h:form>
        <p:selectOneMenu styleClass="selectMenu">
            <f:selectItem itemLabel="test" itemValue="test"/>
        </p:selectOneMenu>
        <p:commandButton value="GO"/>
    </h:form>