Same space between 2 inputText boxes using JSF and CSS - css

Question

I want to create a JSF form where users can write their name and surname and validate them using JSF validators. The problem is that I would like to set the same space between the 2 inputText boxes in the form, in both cases, when the typed data is correct according to the validator, and when it is not correct. So if between the 2 inputText boxes there are X pixels if the user has not typed anything, when typed name is not correct, the error showing message should be displayed between the 2 inputText boxes and the pixels between them should be also X px. I suppose this is a CSS issue, but I am unable to get it, so any help would be appreciated.
Here is my code
<h:form>
<p:panel id="panelregister">
<h:panelGrid columns="1">
<!--Name-->
<p:inputText id="name" label="name" size="32" maxlength="9"
value="#{mManagedBean.name}">
<f:validator validatorId="packagevalidators.NameValidator"/>
</p:inputText>
<p:watermark for="name" value="Name (*)" />
<p:message for="name"/>
<!--Surname-->
<p:inputText id="surname" label="surname" required="true" size="32" maxlength="9"
value="#{mManagedBean.surname}"
requiredMessage="Must enter a surname">
<f:validator validatorId="packagevalidators.SurnameValidator"/>
</p:inputText>
<p:watermark for="surname" value="Surname (*)" />
<p:message for="surname" />
<p:commandButton value="Submit" action="#{mManagedBean.save}" ajax="false" />
</h:panelGrid>
</p:panel>
</h:form>

Answer 1

You are using h:panelGrid which renders as HTML <table>.
p:message will be rendered as div and by default that div won't have any content so it won't take any space you provide.
One way to do this is to use a h:panelGroup around it and give pre defined height of p:message
Example:
<h:panelGroup layout="block" style="height:27px">
<p:message for="name" />
</h:panelGroup>