JSF - Componente para gerar label + field

Front-end
#1

Galera,

eu to fazendo um composite component para gerar o label e o field… É bem simples…
Mass qual o problema? …Laayout… pra variar…

Mas vamos passo a passo…

Primeiro detalhe: a minha pagina onde tem um form possui sempre um p:panelGrid de uma coluna, e outro h:panelGrid de 1 ou 2 colunas (aí depende, se quiser colocar campo do lado de campo ou não). Isto é para produzir este efeito:

PS: Mudar esta arquitetura não é possível.

Beleza… Agora ao componente…

	<cc:implementation>
		<h:panelGrid columns="2">
			<p:outputLabel for="#{cc.attrs.fieldId}" value="#{cc.attrs.fieldLabel}"/>
		    <p:inputText id="#{cc.attrs.fieldId}" required="#{cc.attrs.required}" disabled="#{cc.attrs.disabled}" 
		                 value="#{cc.attrs.targetValue}" styleClass="cc.attrs.styleClass">
				
				<cc:insertChildren /> <!-- Validation Rules -->
		    	<f:ajax event="blur" execute="@this" render="@this" />
		    	  
		    </p:inputText>		
		</h:panelGrid>			
	</cc:implementation>

Então, tenho outro panelGrid para deixar os campos mais alinhados e com um espacinho entre eles…
Beleza, fique alinhado certo…

Mas quando eu insiro estes componentes no formulário, assim:

				<po:inputInteiro targetValue="#{campoController.entity.id}" fieldId="id" fieldLabel="#{msg['entity.id']}"  disabled="true" styleClass="inputTiny"/>

				<po:inputTexto targetValue="#{campoController.entity.nome}" fieldId="nome" fieldLabel="#{msg['entity.nome']}"
							   required="true" styleClass="inputLarge">						
					<f:validateLength for="nome" minimum="3" maximum="255"/>				   
				</po:inputTexto>

				<po:inputTexto targetValue="#{campoController.entity.rotulo}" fieldId="rotulo" fieldLabel="#{msg['entity.rotulo']}"
							   required="true" styleClass="inputLarge">						
					<f:validateLength for="rotulo" minimum="3" maximum="255"/>				   
				</po:inputTexto>

				<po:inputInteiro targetValue="#{campoController.entity.tamanho}" styleClass="inputTiny"
				                 fieldId="tamanho" fieldLabel="#{msg['entity.tamanho']}"/>

Vejam o resultado produzido na tela:

Ficou meio bagunçado né?
Não ficou ideal…

Então, gostaria de saber… alguem pode me ajudar a arrumar isso com css?
Ou me dizer uma forma melhor de fazer isso?

É complicado, pois quando vc cria o composite component, e insere ele dentro de um form,
não importa quantos elementos ele tenha… O JSF sempre vai achar que é só um… Como se tivesse um h:panelGroup…

Por favor galera,
ajudem ae!!

abraços

#2