Primefaces separator is displayed as a row element in panelgrid - jsf

Question

How to use separator tag in primefaces effectively?
For the following output, separator is displayed as one of the element in next row. Ideally I would like separator in a single row and then display other input elements. I have attached screen shot of how separator is displayed, as it is displayed 5th element in second row.
Any help is highly appreciable.
JSF code
<p:panelGrid columns="4" id="mypanel">
<f:facet name="header">
Projects
</f:facet>
<p:outputLabel value="Project: ">
<p:inputText required="true"
readonly="true">
</p:inputText>
</p:outputLabel>
<p:outputLabel value="Project Title: " >
<p:inputText readonly="true">
</p:inputText>
</p:outputLabel>
<p:outputLabel value="Is selected " >
<p:selectBooleanCheckbox value="" />
</p:outputLabel>
<p:outputLabel value="Is approved" >
<p:selectBooleanCheckbox value="" />
</p:outputLabel>
<p:separator>
</p:separator>
... other elements

Answer 1

First, consider the usage of the for attribute of the <p:outputLabel> component. You're not supposed to nest <p:inputText> inside <p:outputLabel>.
Next, you can use <p:row> and <p:column> in order to describe a more complex structure of the content of a <p:panelGrid>.
Try out this:
<p:panelGrid id="mypanel">
<f:facet name="header">Projects</f:facet>
<p:row>
<p:column>
<p:outputLabel value="Project:" for="project">
<p:inputText required="true" readonly="true" id="project"/>
</p:column>
<p:column>
<p:outputLabel value="Project Title:" for="title" />
<p:inputText readonly="true" id="title"/>
</p:column>
<p:column>
<p:outputLabel value="Is selected:" for="isSel"/>
<p:selectBooleanCheckbox value="" id="isSel"/>
</p:column>
<p:column>
<p:outputLabel value="Is approved:" for="isApp"/>
<p:selectBooleanCheckbox value="" id="isApp"/>
</p:column>
</p:row>
<p:row>
<p:column colspan="4">
<p:separator />
</p:column>
</p:row>
<p:row>
<!-- Other elements. -->
</p:row>
</p:panelGrid>
You can see the Live demo, as well.