Grouping columns PrimeFaces 5

I want to create something like this

-----------------------------
| HEADER                     |
-----------------------------
|       USER IMAGE           |
-----------------------------|
|    Key        |    Value   |
-----------------------------
|    Key        |    Value   |
-----------------------------
|    Key        |    Value   |
-----------------------------

So for what i have is

<p:panelGrid columns="2">
        <f:facet name="header">
            <p:column colspan="2">User Profile</p:column>
        </f:facet>

        <h:outputText value="User ID"/>
        <h:outputText value="#{fitbitAuthResponseMB.userProfile.userId}"/>
</p:panelGrid>

I tried using <p:row> like this

<p:panelGrid columns="2">
        <f:facet name="header">
            <p:column colspan="2">User Profile</p:column>
        </f:facet>

        <p:row>
           <p:column colspan="2">
               <h:graphicImage value=".."/>
           </p:column>
        </p:row>

        <p:row>
           <p:column>

               <h:outputText value="User ID"/>
           </p:column>
           <p:column>
        <h:outputText value="#{fitbitAuthResponseMB.userProfile.userId}"/>
           </p:column>
        </p:row>
</p:panelGrid>

but it didn't work as i expected.