JSF Components alignment inside panelGroup

Question

I have a selectOneRadio element with layout="custom" inside a dataTable. Below is the xhtml code-

<p:dataTable var="varlist" value="#{testbean.testlist}">
    <p:column headerText="Choose Option" width="120">
        <p:selectOneRadio id="customRadio" value="#{varlist.varlistValue}"
            layout="custom" required="true">
            <f:selectItem itemValue="10" />
            <f:selectItem itemValue="20" />
        </p:selectOneRadio>

        <h:panelGrid columns="1">
            <h:panelGroup>
                <p:radioButton id="opt1" for="customRadio" itemIndex="0" />
                <h:outputLabel for="opt1" value="OPTION 1" styleClass="radiolabelOption"/>
            </h:panelGroup>

            <h:panelGroup>
                <p:radioButton id="opt2" for="customRadio" itemIndex="1" />
                <h:outputLabel for="opt2" value="OPTION 2" styleClass="radiolabelOption"/>
            </h:panelGroup>
        </h:panelGrid>
    </p:column>
</p:dataTable>

<style type="text/css">
    .radiolabelOption {
      margin-left: 10px;
    }
</style>

So this is how it appears in browser-

As we can see, the outputLabel appears to the bottom with respect to radioButton. But i want that to look centre, w.r.t radioButton as shown below -

I tried below lines of code like

style="display:block; text-align:center" OR
style="margin: 0 auto;"

But none of them produces the desired result.

So How to do it?

Answer 1

Give <h:panelGroup> these styles

.panelGroup{
  display: flex;
  align-items: center;
}