Put the checkbox on the right side of the label - html

Question

I want to design a series of horizontal checkboxes where the checkboxes are located on the right side of the labels.
This is what I have written where the labels are located on the left side.
.add-margin {
margin-top: 10px !important;
}
<div>
<div ng-init="loaded()" ng-class="{'add-margin': descriptionsAvailable}" class="checkbox-inline" ng-repeat="opt in options track by $index">
<label>
<input ng-disabled="answer['none']" type="checkbox" ng-model="answer[opt]" ng-true-value="true" ng-false-value="false" name="checkbox-answer-input" display= inline-block >
<span>{{opt}}</span><br/>
<span><i>{{descriptions[$index]}}</i></span>
</label>
</div>
</div>
How can I fix this?

Answer 1

Use the code like this
<div>
<div ng-init="loaded()" ng-class="{'add-margin': descriptionsAvailable}" class="checkbox-inline" ng-repeat="opt in options track by $index">
<label>
<span>{{opt}}</span>
<input ng-disabled="answer['none']" type="checkbox" ng-model="answer[opt]" ng-true-value="true" ng-false-value="false" name="checkbox-answer-input" display= inline-block >
<br/>
<span><i>{{descriptions[$index]}}</i></span>
</label>
</div>
</div>

Answer 2

If I understand your question correctly, you want the checkbox on left and the text on right with opt and description on separate rows.
You need to add some styles like following and provide relevant classes. I hope this helps.
HTML
<div>
<div ng-init="loaded()" ng-class="{'add-margin': descriptionsAvailable}" class="checkbox-inline" ng-repeat="opt in options track by $index">
<label class="container">
<input ng-disabled="answer['none']" type="checkbox" ng-model="answer[opt]" ng-true-value="true" ng-false-value="false" name="checkbox-answer-input" display= inline-block >
<div class="description">
<span>{{opt}}</span><br/>
<span><i>{{descriptions[$index]}}</i></span>
</div>
</label>
</div>
</div>
CSS
.add-margin {
margin-top: 10px !important;
}
.container {
display: flex;
flex-direction: row-reverse;
}
.description {
margin-right: 8px;
}
Here is a screenshot of how I assume you want the data to show up. If you require a different layout, then let me know