Grid CSS / PrimeFlex: label align-issue with horizontal forms

1) Environment

• PrimeFaces version: 7.1 (SNAPSHOT)
• Affected browsers: all browsers

2) Behavior

Grid CSS and PrimeFlex align labels on the upper left corner. This is not ideal. They should be baselined. (Issue is not specific for babylon-theme.)

PrimeFlex offers CSS-class p-align-baseline to get this done right. But this has (at least) issues with SelectOneMenu:

<h3>Responsive (PrimeFlex, p-align-baseline)</h3>
<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="text1" value="Text 1" />
	<p:inputText id="text1" />

	<p:outputLabel for="text2" value="Text 2" />
	<p:inputText id="text2" />

	<p:outputLabel for="date" value="Date" />
	<p:datePicker id="date" showIcon="true" style="width:auto" />

	<p:outputLabel for="checkbox" value="Checkbox" />
	<p:selectBooleanCheckbox id="checkbox" itemLabel="Checkbox" />

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

	<p:outputLabel for="selectOne" value="SelectOne (misaligned)" />
	<p:selectOneMenu id="selectOne">
		<f:selectItem itemLabel="Select One" itemValue="" />
		<f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
		<f:selectItem itemLabel="PS4" itemValue="PS4" />
		<f:selectItem itemLabel="Wii U" itemValue="Wii U" />
	</p:selectOneMenu>
</p:panelGrid>

When we look to Bootstrap they solve this issue by offering the CSS-Class .col-form-label which add´s padding-top.

I´m currently not totaly sure what´s the best solution.

[melloware]

@christophs78 I say we write a note in the documentation and then close this ticket.

[christophs78]

@mertsincan came up with the following idea:

<style type="text/css">
   .customPanelGrid .ui-panelgrid-content {
            align-items: center;
    }
</style>

<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" styleClass="customPanelGrid">

This is not pixel-perfect but quite good: