p:panelGrid Layout Issue - css

Question

How can I achieve the layout as shown below?
First Name [_________] Last Name [_________]
Street [_________]
I tried some from
https://www.primefaces.org/showcase/ui/panel/panelGrid.xhtml
But ended up as below,
First Name[_______]Last Name[_________]
Street[_________]
Below is the code that I have tried
<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>
What I have also Tried
<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>
This also ended almost similar to the first
First Name[_______]Last Name[_________]
Street[_________]

Answer 1

If you want to use these columnClasses, you need to include also the right css.
A simple solution, without that css classes, will be setting the width of the panelGrid to 100% and the width of columns to 25%, or the desidered %.