h:panelGroup and colspan making my table messed up - html

Question

My table used to look like this:
There is an icon on the right of each field telling the user if what he entered is accepted. The icons used to be really close to the field. But once I added two other fields with a colspan it looks like this :
and it looks okayish when the field is not accepted, which makes no sens since both images are supposed to be in the same place.
Here is the code :
<table class="registration">
<!-- username -->
<tr><td>
<h:outputLabel for="username">#{registering.Username}: </h:outputLabel></td><td>
<p:inputText id="username" value="#{subscribeUser.user.username}"
validator="#{usernameValidator.validate}" maxlength="#{values.small}">
<f:passThroughAttribute name="required" value="true"/>
<f:ajax event="blur" render="usernameCheck usernameMessage submit"></f:ajax>
</p:inputText></td><td>
<h:panelGroup id="usernameCheck">
<h:graphicImage library="images/icons" name="failed_indicator.png" rendered="#{usernameValidator.isIndicatorVisible.usernameFailed}"></h:graphicImage>
<h:graphicImage library="images/icons" name="success_indicator.png" rendered="#{usernameValidator.isIndicatorVisible.usernameSuccess}"></h:graphicImage>
</h:panelGroup></td><td>
<span class="error"><h:message id="usernameMessage" for="username"/></span></td>
</tr>
<!-- password -->
<tr><td>
<h:outputLabel for="password">#{registering.Password}: </h:outputLabel></td><td>
<p:password id="password" value="#{subscribeUser.userCredential.password}" feedback="true"
promptLabel="#{registering.PleaseEnterPass}" weakLabel="#{registering.Weak}"
goodLabel="#{registering.Good}" strongLabel="#{registering.Strong}"
requiredMessage="#{registering.reqPassword}"
validator="#{passwordValidator.validate}">
<f:passThroughAttribute name="required" value="true"/>
<f:attribute name="confirm" value="#{confirmPassword}" />
<f:passThroughAttribute name="required" value="true"/>
<f:ajax event="blur" execute="password confirmPassword" render="passwordMessage passwordCheck confpasswordCheck submit"></f:ajax>
</p:password></td><td>
<h:panelGroup id="passwordCheck">
<h:graphicImage library="images/icons" name="failed_indicator.png" rendered="#{passwordValidator.isIndicatorVisible.passwordFailed}"></h:graphicImage>
<h:graphicImage library="images/icons" name="success_indicator.png" rendered="#{passwordValidator.isIndicatorVisible.passwordSuccess}"></h:graphicImage>
</h:panelGroup>
</td><td>
<span class="error"><h:message id="passwordMessage" for="password"/></span></td>
</tr>
<!-- Confirm password -->
<tr><td>
<h:outputLabel for="confirmPassword" value="#{registering.ConfirmPass}: "/></td><td>
<p:password id="confirmPassword" required="true"
requiredMessage="#{registering.PleaseConfirmPassword}"
binding="#{confirmPassword}">
<f:passThroughAttribute name="required" value="true"/>
<f:ajax event="blur" execute="password confirmPassword" render="passwordMessage passwordCheck confpasswordCheck submit"></f:ajax>
</p:password> </td><td>
<h:panelGroup id="confpasswordCheck">
<h:graphicImage library="images/icons" name="failed_indicator.png" rendered="#{passwordValidator.isIndicatorVisible.passwordFailed}"></h:graphicImage>
<h:graphicImage library="images/icons" name="success_indicator.png" rendered="#{passwordValidator.isIndicatorVisible.passwordSuccess}"></h:graphicImage>
</h:panelGroup>
</td><td>
<span class="error"><h:message id="passwordConfMessage" for="confirmPassword" /></span></td>
</tr>
<!-- Email -->
<tr><td>
<h:outputLabel for="email">#{registering.Email}: </h:outputLabel></td><td>
<p:inputText id="email" required="true" value="#{subscribeUser.user.email}"
validator="#{emailValidator.validate}"
requiredMessage="#{registering.reqEmail}">
<f:passThroughAttribute name="required" value="true"/>
<f:passThroughAttribute name="type" value="email"/>
<f:passThroughAttribute name="maxlength" value="100"/>
<f:ajax event="blur" render="emailCheck emailMessage submit"></f:ajax>
</p:inputText></td><td>
<h:panelGroup id="emailCheck">
<h:graphicImage library="images/icons" name="failed_indicator.png" rendered="#{emailValidator.isIndicatorVisible.emailFailed}"></h:graphicImage>
<h:graphicImage library="images/icons" name="success_indicator.png" rendered="#{emailValidator.isIndicatorVisible.emailSuccess}"></h:graphicImage>
</h:panelGroup> </td><td>
<span class="error"><h:message id="emailMessage" for="email"/></span></td>
</tr>
<!-- Country -->
<tr><td>
<h:outputLabel for="country" value="#{registering.Country}:"></h:outputLabel></td>
<td colspan="3"><p:selectOneMenu required="true" editable="false" id="country" value="#{subscribeUser.user.countryBean}" converter="#{countriesConverter}" effect="fold">
<f:selectItem itemLabel="#{registering.SelectCountry}" itemValue="#{null}" />
<f:selectItems value="#{countriesConverter.countries}" var="country" itemLabel="#{country.shortName}" itemValue="#{country}" />
</p:selectOneMenu></td>
</tr>
<!-- Timezone -->
<tr><td>
<h:outputLabel for="timezone">#{registering.Timezone}: </h:outputLabel></td>
<td colspan="3">
<p:selectOneMenu id="timezone" editable="false" required="true" value="#{subscribeUser.timezoneOffset}" converter="#{timezonesConverter}" effect="fold" >
<f:selectItem itemLabel="#{registering.SelectTimezone}" itemValue="#{null}" />
<f:selectItems value="#{timezonesConverter.timezonesList}" var="timezone" itemLabel="#{timezone.name}" itemValue="#{timezone}" />
</p:selectOneMenu></td>
</tr>
</table>
I don't understand how I can make it work. I tried with primefaces p:row but it's the same problem. I reluctant to use another table for the two last field and align them with those above them because when the page is resized it's messed up as well.

Answer 1

If the closeness was your only concern, I suggest you to get back to the first example and write in css something like this:
.registration td:last-child{
margin-left: 20px;
}
or try with nth-child(desired-child-number).
Beside this, I suggest you to use <h:panelGrid columns="3"> as a container. You will have:
first column as a placeholder, i.e. field description,
second column will be the field,
and third column will be the success/error messagefor input value
I have used it and it works fine. Plus you can add the css rules I previous mentioned