Displaying Checkbox right side of the label

I’am very new to slds.I have used Lightning input type tag for displaying the checkbox.Now checkbox is Appearing in left side.

Present Image:

  <lightning:input type="checkbox"  label="Selected :"  value="{!v.displayComparison.Selected__c}" />

Requirement:

But I need to display checkbox in right side of the label:

Tried code:
I have tried this link: Is this possible to position label for inputCheckbox on the right hand side?

   <lightning:input type="checkbox" class="myCheckbox" label="Checkbox label" />

css:

     .THIS .myCheckbox{
       display: inline-block;
     float: left;
   }

Image:

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

I am also new to SLDS but I have tried below code with some extra div tag to achieve the same.

<div class="slds-grid slds-wrap">
        <div class="slds-col slds-size_1-of-13 slds-p-right_x-small">
            <p>Selected</p>
        </div>
        <div class="slds-col slds-size_1-of-12">
            <lightning:input type="checkbox" />
        </div>
    </div>

below is how this will look like:

Please correct me if this is not what you were trying to achieve.

Method 2

You can remove the standard label through the variant attribute:

<lightning:input type="checkbox" variant="label-hidden" ...

and add the label text separately.

Though if you want the clicks of the label to change the checkbox you will have to figure out a way to set the for attribute of the label element.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0