Correct layout of h:outputLabel and rich:combobox components on same line

With richfaces, how can I get my h:outputLabel and rich:combobox components to display directly adjacent to each other on the same line?

Here are the two approaches I've tried.

I first tried using rich:layout & rich:layoutPanel, but the components appear on separate lines. Here's the code:

<rich:layout>
  <rich:layoutPanel position="left" width="100%">
    <h:outputLabel for="timeSpanUn开发者_开发技巧itsCombo2" value="Time Span " />
    <rich:comboBox id="timeSpanUnitsCombo2" value="#{bean.timeSpanUnitsLabel}" enableManualInput="false">       
      <f:selectItems value="#{bean.timeSpanUnitsList}" />
    </rich:comboBox>
  </rich:layoutPanel>
</rich:layout>

And here's the rendered output:

Next I tried using a h:panelGrid, but again no success - the components are evenly spaced over the available area, instead of being directly adjacent and left-aligned as I intended. Here's the code:

<h:panelGrid columns="2">
  <h:outputLabel for="timeSpanUnitsCombo3" value="Time Span " />
  <rich:comboBox id="timeSpanUnitsCombo3" value="#{bean.timeSpanUnitsLabel}" enableManualInput="false">       
    <f:selectItems value="#{bean.timeSpanUnitsList}" />
  </rich:comboBox>
</h:panelGrid>

And here's the rendered output:

This can be done by many ways. One of them is to use fragment

<s:fragment>
      <h:outputText value="Time Span" />
      <rich:comboBox id="timeSpanUnitsCombo2" value="#{bean.timeSpanUnitsLabel}" enableManualInput="false">       
            <f:selectItems value="#{bean.timeSpanUnitsList}" />
      </rich:comboBox>
</s:fragment>

Or you can use a div instead of fragment. <div> your code...</div>

If you are using seam, you can wrap it in <s:decorate> and use <s:label>

From Seam in Action

....<s:label> and <s:message>. The benefit of using the Seam tags is that they are automatically correlated with the adjacent input component, a feature of <s:decorate>