I have three <div>s, A, B and C. They are all lines of text. Main format:
aaaaaaaaaaaaaa ccccccccccccccccccccccccc
bbbbbbbbbbbbbbbbbbbbbbbbbb
When the window is fully open, ccccccccccccccc can be archived (maybe it fits) above bbbbbbbbbb, and therefore I want it to do this as shown above.
However, when the window is reduced in size, so that either A or C cannot fit on the same line, I want ccccccccccc to move below bbbbbbbbbb, for example:
aaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbb
ccccccccccccccccccccccccccccccc
Therefore, I somehow need to make the default position C to the right of A, but make C move below B when there is not enough space to place C in its full length (and I do n’t need any packing line).
Putting A and B together in the containing <div>and having C, it follows that <div>just does not work, since I want C to be next to A, on the same line, by default, by default; if I wrapped A and B in a dedicated container <div>, I would end with:
aaaaaaaaaaaaaa
bbbbbbbbbbbbbbbbbbbbbbbbbbb ccccccccccccccccccccccccc
... and that's not what I want. (I would also probably end up wrapping the text string in B and C, and I try to avoid this.)
How can this be most effectively implemented?