Components not on expected row when using colspan - css

Question

I have a panelgrid with 5 rows and 7 columns within and have tried to use colspan to line up the different components within the columns. I'll stick my xhtml below:
<p:panelGrid>
<p:row>
<p:column>
<p:row>
<p:column>
<p:outputLabel value="Job Status:" />
</p:column>
<p:column colspan="4">
<p:selectOneMenu value="#{myBean.jobStatus}">
f:selectItems here
</p:selectOneMenu>
</p:column>
<p:column>
<p:selectBooleanCheckbox id="cbRepetition"
value="#{myBean.isRepeatable}"
</p:selectBooleanCheckbox>
</p:column>
<p:column>
<p:outputLabel value="Terminate repetition of this job?" />
</p:column>
</p:row>
<p:row>
<p:column>
<p:outputLabel value="Positions:" />
</p:column>
<p:column>
<p:spinner id="position1"
value="#{myBean.selectedPosition1}" />
</p:column>
<p:column>
<p:spinner id="position2"
value="#{myBean.selectedPosition2}" />
</p:column>
<p:column>
<p:spinner id="position3"
value="#{myBean.selectedPosition3}" />
</p:column>
<p:column>
<p:spinner id="position4"
value="#{myBean.selectedPosition4}" />
</p:column>
<p:column>
<p:outputLabel value="Occurrences:" />
</p:column>
<p:column>
<p:spinner id="occurrences"
value="#{myBean.selectedOccurrences}" />
</p:column>
</p:row>
<p:row>
<p:column>
<p:outputLabel value="Date/Time:" />
</p:column>
<p:column colspan="4">
<p:calendar id="dateTime" pattern="dd/MM/yyyy HH:mm"
value="#{myBean.selectedDateTime}">
</p:calendar>
</p:column>
<p:column>
<p:outputLabel value="Job Location:" />
</p:column>
<p:column>
<p:selectOneMenu id="locationDd"
value="#{myBean.selectedLocationId}">
<f:selectItem itemLabel="Select" itemValue="0" />
<f:selectItem itemLabel="Australia" itemValue="1" />
<f:selectItem itemLabel="Springfield" itemValue="2" />
</p:selectOneMenu>
</p:column>
</p:row>
<p:row>
<p:column>
<p:outputLabel value="Comments:" />
</p:column>
<p:column colspan="6">
<p:inputTextarea />
</p:column>
</p:row>
</p:column>
</p:row>
</p:panelGrid>
I've refactored the code a little bit, for example the jobStatus selectOneMenu is actually a custom component I've created, but I'm confident this isn't the issue as it's been used elsewhere in my project without any trouble.
This panelGrid is sat within a panel within a form.
I'm hoping it is obvious what I am trying to achieve, but what I'm actually getting is as below:
I've used CSS to make the spinners smaller as they should be just big enough to fit an integer 0-9, but this has had no effect, any suggestions why things aren't dislpaying on the correct rows or things I can do to make them display as I wish?
Cheers.

Answer 1

I've realized I just needed to remove the initial <p:row> and <p:column> and it works fine.