Align elements on a JSF popup

Question

I'm new to JSF

I need to have the elements shown in screenshot aligned in rows and columns using JSF tags:

• First row -> 3 columns
• Second row -> 3 columns
• Third row -> 2 columns
• Fourth row -> 2 columns

In other words, the labels need to be aligned in the same columns; the calendars, the selection menu and the textarea need to be aligned to the same column, the two toggle switches need to be one under the other.

Here's the screenshot:

enter image description here

And here's the code as it is right now:

        <p:dialog header="#{i18n['UPDATE_METADATA_HEADER']}"
                  widgetVar="metaDataDialog"
                  styleClass="sortingRoomDialog"
                  resizable="true"
                  modal="true"
                  width="750">
            <h:form id="dlgUpdateDisRealDate_form">
                <h:panelGrid columns="2" styleClass="row">
                    <h:panelGroup id="disDate">
                        <h:outputText value="#{i18n['DIS_REAL_DATE']}"/>
                        <sf:calendar bean="#{sortingRoomSearchResultController.context}"
                                     property="DIS_REAL_DATE"
                                     readonly="#{sortingRoomSearchResultController.context.isDisDateIllimited()}"
                        />
                    </h:panelGroup>
                    <h:panelGroup>
                        <h:outputText value="#{i18n['ILLIMITED']}"/>
                        <p:toggleSwitch value="#{sortingRoomSearchResultController.context.disDateIllimited}"
                                        onIcon="fa fa-times"
                                        offIcon="fa fa-check"
                                        styleClass="customRadioButton uncheckable">
                                        <p:ajax update="disDate"/>
                        </p:toggleSwitch>
                    </h:panelGroup>
                </h:panelGrid>

                <h:panelGrid columns="2" styleClass="row">
                    <h:panelGroup id="arrDate">
                        <h:outputText value="#{i18n['ARR_ID']}"/>
                        <sf:calendar bean="#{sortingRoomSearchResultController.context}"
                                     readonly="#{sortingRoomSearchResultController.context.isArrDateIllimited()}"
                                     property="ARR_REAL_DATE"/>
                    </h:panelGroup>
                    <h:panelGroup>
                        <h:outputText value="#{i18n['ILLIMITED']}"/>
                        <p:toggleSwitch value="#{sortingRoomSearchResultController.context.arrDateIllimited}"
                                        offIcon="fa fa-check"
                                        onIcon="fa fa-times"
                                        styleClass="customRadioButton uncheckable">
                                        <p:ajax update="arrDate"/>
                        </p:toggleSwitch>
                    </h:panelGroup>
                </h:panelGrid>


                <h:panelGrid columns="3" styleClass="row">
                    <h:panelGroup>
                        <h:outputText value="#{i18n['ENUM_DYNA_PROPERTY_TYPE$DIT_ID']}"/>
                    </h:panelGroup>
                    <sf:selection property="DIT_ID"
                                  bean="#{sortingRoomSearchResultController.context}"
                                  items="#{sortingRoomSearchResultController.getDispostionTypeList()}"
                                  itemValue="DIT_ID"/>
                </h:panelGrid>




                <h:outputText value="#{i18n['COMMENT']}"/>
                <sf:textarea bean="#{sortingRoomSearchResultController.context}" property="comment"/>
                <div class="ui-dialog-buttonpane ui-dialog-footer ui-widget-content">
                    <p:commandButton value="#{i18n['BUTTON_VALIDATION']}"
                                     action="#{sortingRoomSearchResultController.updateDisRealDate()}"
                                     ajax="false"/>
                </div>

            </h:form>
        </p:dialog>

Thanks for your help !

• I tried using tags.
• I tried reorganizing the panelGroups and panelGrids
• I tried using CSS

I exptected to have the desired structure, instead, I got some messed up structure or an error when changing the Ids of some tags.