p：panelGrid布局问题

Question

如何实现如下所示的布局？

            First Name  [_________]                     Last Name [_________]

            Street      [_________] 

我尝试过]

https://www.primefaces.org/showcase/ui/panel/panelGrid.xhtml

但是最终如下所示，

First Name[_______]Last Name[_________]
Street[_________]    
下面是我尝试过的代码

<p:panelGrid columns="4" layout="flex" columnClasses="p-col-12 p-md-3 p-xl-2, p-col-12 p-md-9 p-xl-4, p-col-12 p-md-3 p-xl-2, p-col-12 p-md-9 p-xl-4" contentStyleClass="p-align-baseline ui-fluid">
<p:outputLabel for="First Name" value="First Name" />
<p:inputText id="First Name" />

<p:outputLabel for="Last Name" value="Last Name" />
<p:inputText id="Last Name" />

<p:outputLabel for="Street" value="Street" />
<p:inputText id="Street" />

</p:panelGrid>          
我也尝试过的内容

<h:panelGrid columns="4"  styleClass="panelNoBorder">


        <p:row>
            <p:column><p:outputLabel value="First Name" /></p:column>
            <p:column>
                <p:inputText id="First Name"
                        value="#{First Name}"
                        maxlength="10" style="width: 20%;">
                    </p:inputText>
            </p:column>

            <p:column><p:outputLabel value="Last Name" />   </p:column>
            <p:column>
                <p:inputText id="Last Name"
                        value="#{Last Name}"
                        maxlength="10" style="width: 20%;">
                    </p:inputText>  
            </p:column>
        </p:row>

        <p:row>
            <p:column><p:outputLabel value="Street" /></p:column>
            <p:column>
                <p:inputText id="Street"
                        value="#{Street}"
                        maxlength="10" style="width: 20%;">
                    </p:inputText>
            </p:column>

        </p:row>            

</h:panelGrid>  
这也几乎与第一个类似

First Name[_______]Last Name[_________]
Street[_________] 

如何实现如下所示的布局？名[_________]姓[_________]街道[_________]我从https：// www ....