Need help with aligning texts

[rain13]

Hi!

It looks like a simple thing but right now I couldnt find any way to do it:

I need text to be aligned center and then an other text below it. But the text that is below it must be aligned so that it's right  side is at same place where previous line's right side.
 

<div style="text-align: center; width: 864px; background-color: red">
	<span style="background-color: blue">Some long text that takes more space that is nicely centered</span>
	<br>
	<span style="background-color: green">aligned to right</span>
</div>

right now the green and blue are both centered. I need the green block end where blue block ends.

[dsonesuk]

This seems to work

<div style="text-align: center; width: 864px; background-color: red;">
	<span style="background-color: blue;">Some long text that takes more space that is nicely centered</span>
	
	<span style="background-color: green; vertical-align: bottom; margin-left: -0.2em;">aligned to right</span>
</div>

along with

span:first-child::after {
    content: "";
    display: inline-block;
    margin-top: 2.5em;
    vertical-align: top;
}

https://www.w3schools.com/code/tryit.asp?filename=FL3D27QRO099

[rain13]

Ok, now the left side of green block starts where blue ends. But I needed right side of green to end where right side of blue ends.

Edit: Got it solved.

Trick was to add span around 2 inner spans with display inline block and then inside this I was able align right.

Btw, your example was also interesting. I havent seen such alignment before.

Edited November 1, 2017 by rain13