Separating <h:selectOneRadio>

[sorna sundari]

Hi All,

My specification comes as follow:

0 Radio1 Label
Text to be displayed under radio1.
0 Radio2 Label
Text to be displayed under Radio2.


Like above my UI should look like. How can i achieve this. [Note: 0 represents radio button]

My current code snippet is:

<h:panelGroup>
<h:panelGrid columns="2">
<h:panelGrid columns="1">
<h:selectOneRadio
style="color:black;"
value="#{backing_dashboard.Option}" layout="pageDirection">
<a4j:support action="#{backing_dashboard.optionChangeAcion}"
event="onchange" limitToList="true" />
<f:selectItem itemLabel="My Projects" itemValue="1" />
<f:selectItem itemLabel="All Projects" itemValue="2" />
</h:selectOneRadio>
</h:panelGrid>
<h:panelGrid columns="1">
<hutputLabel value="This will allow you to view your own projects."/>
<hutputLabel value="This will allow you to view All Projects available in your login."/>
</h:panelGrid>
</h:panelGrid>
</h:panelGroup>

Note: Select Radio component must be single component. could anyone help me?

Thanks in Advance,
Sorna .K