Set inline 2 control group jQuery Mobile - jquery-mobile

Question

I would like to align 2 control group with jQuery Mobile. I use the the version 1.4.2.
This is what I have : http://i.stack.imgur.com/qEAav.png
And this is what I would like to do : http://i.stack.imgur.com/NA9YR.png
My currently code is :
<h3 class="ui-bar ui-bar-a ui-corner-all">
<div id="btnPaie" align="center">
Fermer la liste
</br>
<form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid1">
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEffectif" value="" checked="checked" onclick="selectorFunctionPaie('age');">
<label for="loadEffectif">Age</label>
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadAnciennete" value="" onclick="selectorFunctionPaie('anciennete');">
<label for="loadAnciennete">Ancienneté</label>
</fieldset>
</form>
<form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid2">
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEffectif2" value="" checked="checked" onclick="selectorFunctionPaie('effectif');">
<label for="loadEffectif2">Effectif</label>
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEPT" value="" onclick="selectorFunctionPaie('etp');">
<label for="loadEPT">ETP</label>
</fieldset>
</form>
</div>
</h3>
If there are pro jQuery Mobile I'll glad to solve my problem.
Thanks in advance.

Answer 1

See if this works for you:
<h3 class="ui-bar ui-bar-a ui-corner-all">
<div id="btnPaie">
<form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid2">
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEffectif2" value="" checked="checked" onclick="selectorFunctionPaie('effectif');" />
<label for="loadEffectif2">Effectif</label>
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEPT" value="" onclick="selectorFunctionPaie('etp');" />
<label for="loadEPT">ETP</label>
</fieldset>
</form>
<form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid1">
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEffectif" value="" checked="checked" onclick="selectorFunctionPaie('age');" />
<label for="loadEffectif">Age</label>
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadAnciennete" value="" onclick="selectorFunctionPaie('anciennete');" />
<label for="loadAnciennete">Ancienneté</label>
</fieldset>
</form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid3">
Fermer la liste
</fieldset>
</div>
</h3>
CSS to line things up and add spacing:
#btnPaie {
text-align: center;
}
#btnPaie form, #btnPaie fieldset {
display: inline;
}
#btnPaie fieldset {
margin: 1em;
}
DEMO