Align <p:selectOneMenu> with <p:outputLabel> horizontally inside a table column (<p:panelGrid>)

Question

As you see in the image below:

I want these components to be horizontally aligned correctly.

i tried the follwoing but no avail:

...
<p:outputLabel value="Etat d'examen : " for="state"/>  
<p:selectOneMenu id="state"
                 value="#{examenListBean.stateOption}" 
                 style="width: 120px;" > 

    <p:ajax listener="#{examenListBean.fetch}" update="tabexam"/>
    <f:selectItems value="#{examenListBean.etatExamOptions}"/> 

</p:selectOneMenu>
...

Answer 1

Use vertical-align:middle; for them to align properly.

For Instance, as per your code,

style="width: 120px; vertical-align:middle;"

Hope this helps.