In h:panelGrid
every JSF tag lands in a new column. If you want 'UserName' and <h:inputText>
to be next to each other in separate columns your XHTML should look like this:
<h:panelGrid columns="4">
<h:outputText value="UserName" />
<h:inputText ............../>
<h:outputText value="Password" />
<h:inputSecret ............/>
</h:panelGrid>
So in your case if you have 4 columns, then first row will be taken by label-input x2, what comes after that will land in a new row. If on the other hand you want each label-input pair to land in a separate row just set the columns attribute to columns="2"
.
You can also style each column like so:
<h:panelGrid ... columnClasses="one-col,two-col,three-col,four-col" >