Input fields alignment in JSP/JSF - html

Question

I would like to align all the input fields. I used JSF panelGrid. See in the attached image, when the last 3 fields are aligned correctly, but the first one moved slightly left. I did all possible attempts I could, but failed to align the first input field. Please, help me out.
JSF Problem marked image
My Code:
<h:form id="MF">
<%--Form container Start--%>
<div align="center" class="form-align">
<div align="left" class="block-align use-border" style="width:80%">
<div align="left" class="block-align" style="width:100%">
<h:panelGrid columns="2" frame="none" cellspacing="2" cellpadding="2">
<h:column>
<h:outputText id="lbl1" styleClass="lbltxt" value="#{---}" style="width:200px;" />
</h:column>
<h:column>
<h:panelGrid columns="2" frame="none" cellspacing="2" cellpadding="2">
<h:column>
<h:inputText id="txt1" value="#{---}" styleClass="inputfld" size="10" maxlength="6" onfocus="gotFocusEvents(this)" onkeydown="keyDownEvents(this)" onkeypress="keyPressEvents(this)" onkeyup="keyUpEvents(this)"/>
</h:column>
<h:column>
<h:outputLabel id="outlbl1" for="txt1" styleClass="lbltxt" />
</h:column>
</h:panelGrid>
</h:column>
</h:panelGrid>
</div>
</div>
<br>
<%---------------------------------------------------------------------------------------------------------%>
<div align="left" class="block-align use-border" style="width:80%">
<div align="left" class="block-align" style="width:100%">
<h:panelGrid columns="2" frame="none" cellspacing="2" cellpadding="2">
<h:column>
<h:outputText id="lbl2" value="#{---}" styleClass="lbltxt" style="width:200px;" />
</h:column>
<h:column>
<h:inputText id="txt2" value="#{---}" styleClass="inputfld" size="10" readonly="true"/>
</h:column>
<h:column>
<h:outputText style="text-align:left;" id="lbl3" styleClass="lbltxt" value="#{---}" />
</h:column>
<h:column>
<h:inputTextarea id="txt3" value="#{---}"
styleClass="inputfld" rows="10" cols="65"
onfocus="gotFocusEvents(this)" onkeydown="keyDownEvents(this)" onkeypress="keyPressEvents(this)">
</h:inputTextarea>
</h:column>
<h:column>
<h:outputText id="lbl4" value="#{---}" styleClass="lbltxt" style="width:200px;" />
</h:column>
<h:column>
<h:inputTextarea id="txt4" value="#{---}"
styleClass="inputfld" rows="10" cols="65"
onfocus="gotFocusEvents(this)" onkeydown="keyDownEvents(this)" onkeypress="keyPressEvents(this)">
</h:inputTextarea>
</h:column>
</h:panelGrid>
</div>
</div>
<%--Non Container End--%>
</div>
</h:form>

Answer 1

My guess is your labels exeed the width of 200px in the lower table.
You should add another styleclass to all labels (h:outputText) defining the width and also the min-width. set the value as big as the widest label in your tables you want to align.
You should also avoid styling elements directly, if possible, to save yourself and others working on this code from unnessesary messy and inconsistent style.