[SalesForce] Lightning Vertical Navigation: CSS for list item to be align to the right

I have a vertical navigation that is populated from a list of records, for each item I am trying to add a span with some extra information (in this case a badge), but I want to be pull to the right (just the span). However, it doesnt matter what I do is always stick to the left to the left

I tried adding
adding !important
slds-text-align_right
slds-col_bump-right

Is there anything I am missing?

<div class="demo-only slds-p-top_small" style="width: 100%;">
    <nav class="slds-nav-vertical" aria-label="Sub page">
        <div class="slds-nav-vertical__section">
            <ul aura:id="theList">
                <aura:iteration items="{!v.attList}" var="att" indexVar="indx">
                    <li aura:id="testli" class="slds-nav-vertical__item" onclick="{!c.getTasks}" data-id="{!indx}" >
                        <div id="{!att.Id}" class="slds-nav-vertical__action" >
                            {!att.Name}
                            <span class="slds-text-align_right slds-badge ">
                                I am Badge
                            </span>
                        </div>
                    </li>
                </aura:iteration>                
            </ul>
        </div>
    </nav>
</div>

Best Answer

You can use a display flex and play with the justify-content attribute.

<aura:attribute name="forIterate" type="List" default="One, Two, Three" />

<div class="demo-only slds-p-top_small" style="width: 100%;">
<nav class="slds-nav-vertical" aria-label="Sub page">
    <div class="slds-nav-vertical__section">
        <ul aura:id="theList">
            <aura:iteration items="{!v.forIterate}" var="att" indexVar="indx">
                <li aura:id="testli" class="slds-nav-vertical__item" data-id="{!indx}" >
                    <div id="{!att}" class="slds-nav-vertical__action" style="display: flex;justify-content: space-between;align-items: center;">
                        <span class="text">{!att}</span>
                        <span class="slds-text-align_right slds-badge ">
                            I am Badge
                        </span>
                    </div>
                </li>
            </aura:iteration>                
        </ul>
    </div>
</nav>

Related Topic