How to add style to h:panelGrid
===

I have a panel grid with two columns and I want to align the right column text in the center and the left column text to the left.

I try to play with it over and over but still it’s not working

    <pe:layoutPane position="south" resizable="false" closable="false" statusbar="true" spacing="0">
                    <h:panelGrid columns="2" styleClass="left,centered">
                        <h:outputText value="DEV"/>
                        <h:panelGroup>
                            <h:outputText value="Developed by "/>
                            <h:outputLink id="link1" value="mailto:to@mm.com" >
                                <h:outputText value="text" style="text-decoration:underline"/>
                            </h:outputLink>
                        </h:panelGroup>
                        <h:outputText/>
                    </p:panelGrid>
                </pe:layoutPane>

Here is the css:
   
     .centered  {
     margin: 0px auto;
    text-align: center;
     }


    .left {
    float: left;   
    }


Any idea how could I archive this layout ?? 

Thanks
