How to make elements in one line JSF - jsf

Question

How to make elements to render in one line like it is showed on image below:
Here is the code:
<h:outputLabel
value=" #{cdocmsgs['promo.action.name']} "
id="promo_action_name_id"/>
<h:selectOneMenu id="promotion" widgetVar="sub" tabindex="206"
styleClass="select-fix-average"
value="#{cdocBean.entity.promoActionName}" effect="fade"
required="#{cdocBean.entity.promotion}" requiredMessage="#{cdocmsgs['enter.promo']}">
<f:selectItem itemLabel="#{cdocmsgs['promoSelect']}"
itemValue="" />
<f:selectItems value="#{promoActionBean.DAO.resultList}"
var="item" itemLabel="#{item.name}" itemValue="#{item.name}" />
</h:selectOneMenu>
<h:outputText value="" />
<h:outputText value="" />
<h:outputLabel value=" #{cdocmsgs['source.of.info']} "
id="whenId"/>
<h:selectOneMenu id="source" widgetVar="sub"
styleClass="select-fix-average"
value="#{cdocBean.entity.source}" effect="fade" tabindex="206"
required="#{cdocBean.entity.promotion}" requiredMessage="#{cdocmsgs['enter.source']}">
<f:selectItem itemLabel="#{cdocmsgs['sourceSelect']}"
itemValue="" />
<f:selectItems value="#{adSourceBean.DAO.resultList}" var="item"
itemLabel="#{item.name}" itemValue="#{item.name}" />
</h:selectOneMenu>
I have placed h:panelGroup but it did not help.

Answer 1

You can use h:panelGrid like this:
<h:panelGrid columns="3" columnStyles="style1, style2, style3">
<jsfelement 1 />
<jsfelement 2 />
<jsfelement 3 />
<jsfelement 4 />
<jsfelement 5 />
<jsfelement 6 />
</h:panelGrid>
It will look like this:
element1 element2 element3
element4 element5 element6
And be rendered as a html table. You can of course style it as you like.

Answer 2

use a simple html would be one option.
or there are panelGrid and panelGroup in facelets to do that. usually the panlGroup is used inside the panelGrid to group multiple components into one cell.
an example: http://www.jsftoolbox.com/documentation/help/12-TagReference/html/h_panelGrid.html

Answer 3

You can achieve this by using a html table
<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td><h:outputLabel value=" #{cdocmsgs['promo.action.name']} "
id="promo_action_name_id"/></td>
<td><h:selectOneMenu id="promotion" widgetVar="sub" tabindex="206"
styleClass="select-fix-average"
value="#{cdocBean.entity.promoActionName}" effect="fade"
required="#{cdocBean.entity.promotion}" requiredMessage="#{cdocmsgs['enter.promo']}">
<f:selectItem itemLabel="#{cdocmsgs['promoSelect']}"
itemValue="" />
<f:selectItems value="#{promoActionBean.DAO.resultList}"
var="item" itemLabel="#{item.name}" itemValue="#{item.name}" />
</h:selectOneMenu></td>
<td><h:outputText value="" /></td>
<td><h:outputText value="" /></td>
</tr>
</table>