如何使两个Primefaces面板彼此相邻？

Question

Is there a way in primefaces to place two primefaces panel adjacent to each other ? Panels are getting rendered only in vertical alignment. Couldn't get them rendered in horizontal alignment , next to each other. Tried using h:panelGrid also. But no luck.

Here is the code fragment:

<h:panelGrid>
  <p:row>
  <p:column>
       <p:panel id="panel22" header="New Bill">
         <p:inputText>aaa</p:inputText>
       </p:panel>
  </p:column>
  <p:column>
    <p:panel id="panel222" header="Chart">
        <p:inputText>bbb</p:inputText>
      </p:panel>
  </p:column>
 </p:row>
</h:panelGrid>   

Answer 1

Try below code. This would show both panels side by side with same height.

<h:panelGrid columns="2">
       <p:panel id="panel22" header="New Bill" style="height:200px">
         <p:inputText>aaa</p:inputText>
       </p:panel>
    <p:panel id="panel222" header="Chart" style="height:200px">
        <p:inputText>bbb</p:inputText>
      </p:panel>
</h:panelGrid>