I'm attempting to achieve this layout with the icon contained within a label element.
Edited in Photoshop:
https://i.sstatic.net/m3Fax.png
Current layout:
https://i.sstatic.net/XRjvH.png
Below is the code snippet for that particular section
<div class="form-group col-6 m-0">
<label class="my-1 mr-2" for="role"><i class="fas fa-tag"></i> ROLE <span class="ml-auto"><i class="fas fa-question-circle"></i></span></label>
<select class="custom-select my-1 mr-sm-2 form-control r-0 light s-12" id="role">
<option value="1">Administrator</option>
</select>
</div>
Within this span element
<span class="ml-auto"><i class="fas fa-question-circle"></i></span>.ml-auto
.text-right
.d-flex .justify-content-end
.float-right
.pull-right
However, none of these options seem to be effective.
Is there a way to position the i element to the right as shown in the edited image?