css, float alternative

Question

In my web app I have a toolbar, it's a div:

The div has 3 spans. The contents of the 3 spans get filled later.

And the size of the individual spans differ every time.

<div>
    <span id="ab1" style="display: inline-block;"></span>
    <span id="ab2" style="display: inline-block;"></span>
    <span id="ab3" style="display: inline-block;"></span>
</div>

Now, I want, that span "ab1" should be placed on the left, "ab2" and "ab3" on the right side on the div.

Is this possibe WITHOUT float right/left?

Answer 1

Use position:absolute and text-align:right

CSS

div{background:red; text-align:right; position:relative;}
#ab1{position:absolute; left:0; background:yellow;}
#ab2{background:yellow;}
#ab3{background:yellow;}

DEMO

Answer 2

You can use display flex for container and margin-left: auto for #ab2.

div{
    display: flex;
}
#ab2{
    margin-left: auto;
}