How to make such (inside) line wrapping?

Question

css

There is the following structure -

div.container>span.first-title{TEXT}+span.second-title{TEXT}

You need to make sure that the text from the first span and the second are on the same line, but the second is pressed to the right edge. If the text from the first span exceeds the width of the .container in its width, then the line should be wrapped, and the text from the second span should also be wrapped and also be pressed to the right side. If the text from the first span overlaps the padding of the second span with its width, then the text should be wrapped along with the text from the second span, as in the second paragraph.

Is it possible to do this in css? And if possible, how. I have no thoughts at all in my head, except for js.

Answer 1

Make second-title nested within first-title, set position: relative to first-title, position: absolute to second-title and right: 0.

Answer 2

float:left for span.second-title?