Form Layout

<h:form>

    <div class="card">
        <h5>Vertical</h5>
        <div class="ui-fluid">
            <div class="field">
                <p:outputLabel for="firstname1" value="Firstname"/>
                <p:inputText id="firstname1"/>
            </div>
            <div class="field">
                <p:outputLabel for="lastname1" value="Lastname"/>
                <p:inputText id="lastname1"/>
            </div>
        </div>
    </div>

    <div class="card">
        <h5>Vertical and Grid</h5>
        <div class="ui-fluid formgrid grid">
            <div class="field col">
                <p:outputLabel for="firstname2" value="Firstname"/>
                <p:inputText id="firstname2"/>
            </div>
            <div class="field col">
                <p:outputLabel for="lastname2" value="Lastname"/>
                <p:inputText id="lastname2"/>
            </div>
        </div>
    </div>

    <div class="card">
        <h5>Horizontal and Fixed Width</h5>
        <div class="field grid">
            <p:outputLabel for="firstname3" styleClass="col-fixed" style="width:100px" value="Firstname"/>
            <div class="col">
                <p:inputText id="firstname3"/>
            </div>
        </div>
        <div class="field grid">
            <p:outputLabel for="lastname3" styleClass="col-fixed" style="width:100px" value="Lastname"/>
            <div class="col">
                <p:inputText id="lastname3"/>
            </div>
        </div>
    </div>

    <div class="card">
        <h5>Horizontal and Fluid</h5>
        <div class="ui-fluid">
            <div class="field grid">
                <p:outputLabel for="firstname4" styleClass="col-12 md:col-2" value="Firstname"/>
                <div class="col-12 md:col-10">
                    <p:inputText id="firstname4"/>
                </div>
            </div>
            <div class="field grid">
                <p:outputLabel for="lastname4" styleClass="col-12 md:col-2" value="Lastname"/>
                <div class="col-12 md:col-10">
                    <p:inputText id="lastname4"/>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <h5>Inline</h5>
        <div class="formgroup-inline">
            <div class="field">
                <p:outputLabel for="firstname5" styleClass="ui-sr-only" value="Firstname"/>
                <p:inputText id="firstname5" placeholder="Firstname"/>
            </div>
            <div class="field">
                <p:outputLabel for="lastname5" styleClass="ui-sr-only" value="Lastname"/>
                <p:inputText id="lastname5" placeholder="Lastname"/>
            </div>
            <p:button value="Submit"/>
        </div>
    </div>

    <div class="card">
        <h5>Vertical Checkbox</h5>
        <div class="field-checkbox">
            <p:selectBooleanCheckbox id="v_option1"/>
            <p:outputLabel for="v_option1" value="Option 1"/>
        </div>
        <div class="field-checkbox">
            <p:selectBooleanCheckbox id="v_option2"/>
            <p:outputLabel for="v_option2" value="Option 2"/>
        </div>

        <h5>Horizontal Checkbox</h5>
        <div class="formgroup-inline">
            <div class="field-checkbox">
                <p:selectBooleanCheckbox id="h_option1"/>
                <p:outputLabel for="h_option1" value="Option 1"/>
            </div>
            <div class="field-checkbox">
                <p:selectBooleanCheckbox id="h_option2"/>
                <p:outputLabel for="h_option2" value="Option 2"/>
            </div>
        </div>
    </div>

    <div class="card">
        <h5>Help Text</h5>
        <div class="field ui-fluid">
            <p:outputLabel for="username" value="Username"/>
            <p:inputText id="username"/>
            <small id="username-help">Enter your username to reset your password.</small>
        </div>
    </div>

    <div class="card">
        <h5>Advanced</h5>
        <div class="ui-fluid formgrid grid">
            <div class="field col-12 md:col-6">
                <p:outputLabel for="firstname6" value="Firstname"/>
                <p:inputText id="firstname6"/>
            </div>
            <div class="field col-12 md:col-6">
                <p:outputLabel for="lastname6" value="Lastname"/>
                <p:inputText id="lastname6"/>
            </div>
            <div class="field col-12">
                <p:outputLabel for="address" value="Address"/>
                <p:inputTextarea id="address" rows="4"/>
            </div>
            <div class="field col-12 md:col-6">
                <p:outputLabel for="city" value="City"/>
                <p:inputText id="city"/>
            </div>
            <div class="field col-12 md:col-3">
                <p:outputLabel for="state" value="State"/>
                <p:selectOneMenu id="state">
                    <f:selectItem itemLabel="Select One" itemValue="#{null}" noSelectionOption="true"/>
                    <f:selectItem itemLabel="Option 1" itemValue="Option 1"/>
                    <f:selectItem itemLabel="Option 2" itemValue="Option 2"/>
                    <f:selectItem itemLabel="Option 3" itemValue="Option 3"/>
                </p:selectOneMenu>
            </div>
            <div class="field col-12 md:col-3">
                <p:outputLabel for="zip" value="Zip"/>
                <p:inputText id="zip"/>
            </div>
        </div>
    </div>

</h:form>