How to left-justify a group of icons but right-justify the last icon in the group?

I’m trying to left-justify a group of icons in the header row but right justify the last one, on the same row. I cannot figure out how to do that. I can either left or right justify them, but I cannot do both.

The last icon in the group, profile needs to be right justified.

<div class="ion-text-left">
    <ion-icon size="large" name="heart"/>
    <ion-icon size="large" name="courage"/>
    <ion-icon size="large" name="shadow"/>
    <ion-icon size="large" name="profile"/>
</div>

For reference, I am trying to right-align the last icon shown here:

Screen Shot 2021-07-12 at 10.31.52 PM752×122 9.01 KB

Thanks for any help!

1 post - 1 participant

Read full topic