Struggling to come up with a title, but my jsfiddle should clear things up:
https://jsfiddle.net/1btr7mkq/
<div class="blabla">
Bla bla bla blalblabl bla bla bla bla bla
<div class="questionMark">?</div>
</div>
When resizing the output window, I noticed that the question mark sometimes falls onto the second line, while the "blablas" remain on one line.
https://i.sstatic.net/RTZf8.png
How can I prevent this from happening? I've thought of two potential solutions: The first involves setting a "reserved" width on the right side for the question mark. This way, if the text gets too close to the edge, it will drop down. The second, more ideal solution eliminates the need for reserved width on the right side. The lines above the last one can use the full width and won't break prematurely. In this scenario, the page would need to detect when the question mark has jumped lines and add a blank line below its own content.
I've attempted a few strategies but none have achieved the desired outcome.