How to right align a flipswitch in jquery mobile 1.4.5

Question

I'm trying to create a "Preference" page for a mobile App created with JQM and PhoneGap.

The flipswitch appears right in front of the text, but not aligned to the right (as native preferences/settings usually appear), so it looks very disorganized.

These two other posts are similar: How do you make a flipswitch on the right corner of a fixed header in jQuery Mobile? How to right-align a flip toggle switch in jQuery mobile

But neither solv my problem properly (in the first link it looks awful and in the second, well, it's not flipswitch element)

An example of my code:

http://jsfiddle.net/JTGE6/23/

HTML

<label for="radiog_lite_Selec" class="lablsett">Selec</label>
<select name="radiog_lite_Selec" data-mini="true" id="radiog_lite_Selec" data-role="flipswitch" style="position: absolute; right: 0;">
    <option value="1">On</option>
    <option value="0">Off</option>
</select> 

css

.ui-mobile label.lablsett
{
    left: 0 !important;
    float: left;
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 10px;
    color: #000;
}

My question: How can the Label Text to the left and the flipswith (in front of the text) but aligned to the right?

Thanks!

Answer 1

Put each option row in a container div:

<div class="optContainer">
    <label for="radiog_lite_Selec" class="lablsett">Select</label>
    <select name="radiog_lite_Selec" data-mini="true" id="radiog_lite_Selec" data-role="flipswitch" style="position: absolute; right: 0;">    
        <option value="1">On</option>    
        <option value="0">Off</option>
    </select>
</div>

Then use CSS to float the flipswitch div to the right:

.ui-mobile label.lablsett {
    left: 0 !important;
    float: left;
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 10px;
    color: #000;
}
.optContainer .ui-flipswitch {
    float: right;
    margin-right: 10px;
}

Updated FIDDLE