How to style Radiobutton list in jQueryMobile 1.4.2 with formatted content - jquery-mobile

Question

I'm trying to create something like the following in jQueryMobile 1.4.2 - i.e. a list of radio buttons with content to explain each option. This is a jquery screenshot from version 1.2 from this great article best practices article. The size of the description text is smaller than the body text.
However when I copy his sample code directly from it comes out sized incorrectly like this (other controls shown for reference size).
Here's the sample code
<fieldset data-role="controlgroup">
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">
<h3 class="ui-li-heading">jQuery Mobile</h3>
<p class="ui-li-desc">Easy and great for all project from smartphones to dumbphones</p>
</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">
<h3 class="ui-li-heading">Sencha Touch</h3>
<p class="ui-li-desc">Great for complex apps but a higher learning curve</p>
</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">
<h3 class="ui-li-heading">jQTouch</h3>
<p class="ui-li-desc">Simple, lightweight, but focused on webkit</p>
</label>
</fieldset>
It turns out the reason the above code no longer works is that it references css class name ul-li-desc which used to be in jquery mobile 1.2.1 css but is no longer in the latest css for version 1.4.2.
The new 1.4.2 version has sample code for something very similar in the ListView component that looks like this
The css class that reduces the size of the font here is .ui-listview>li p
So what's the correct way in jQuery Mobile 1.4.2 to create a radio button list with added content that isn't huge?

Answer 1

The easiest way to undetstand jQM CSS structure, is to firebug current view. jQM changes HTML markup based on widget as it adds extra elements and wraps others in order to each the final UI.
Bear in mind, you have to be specific and caucious when overriding jQM styles. Most of the widgets share the same classes (global classes).
Also note that as of jQM 1.4 to increase performance, the team has reduced the amount of inner elements that are you used for styling widgets.
/* <p> within <label> */
label p {
font-size: .9em;
font-weight: 400;
display: block;
}
/* <h3> & <p> within <label> */
label h3, label p {
margin: .45em;
}
/* adjust position of radio button itself */
.ui-radio input, label.ui-btn:after {
top: 35% !important;
}
Demo