title: How to add style to h:panelGrid
body: <p>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.</p>
  
  <p>I try to play with it over and over but still it’s not working</p>
  
  <pre><code>&lt;pe:layoutPane position="south" resizable="false" closable="false" statusbar="true" spacing="0"&gt;
                  &lt;h:panelGrid columns="2" styleClass="left,centered" width="100%"&gt;
                      &lt;h:outputText value="DEV"/&gt;
                      &lt;h:panelGroup&gt;
                          &lt;h:outputText value="Developed by "/&gt;
                          &lt;h:outputLink id="link1" value="mailto:to@mm.com" &gt;
                              &lt;h:outputText value="text" style="text-decoration:underline"/&gt;
                          &lt;/h:outputLink&gt;
                      &lt;/h:panelGroup&gt;
                  &lt;/p:panelGrid&gt;
              &lt;/pe:layoutPane&gt;
  </code></pre>
  
  <p>Here is the css:</p>
  
  <pre><code> .centered  {
   margin: 0px auto;
  text-align: center;
   }
  
  
  .left {
  float: left;   
  }
  </code></pre>
  
  <p>Any idea how could I archive this layout ?? </p>
  
  <p>Thanks</p>