title: Floating of text-boxes
body: <p>I have a picture with some text surrounding it. The "problem" is responsive design. Here are 3 scenarios separated by the grey vertical line:</p>
  
  <p><a href="https://i.stack.imgur.com/YoQwZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YoQwZ.png" alt="these are the images of it"></a></p>
  
  <p>I currently have scenario 1. But it looks awkward if only a single word is moved to the first line with full width.</p>
  
  <p>Is there a possibility to put the text in some "protected box" which prevents the text from getting ripped apart? The result should look like scenario 2. For sure I could do it using a table with 2 columns, but I want the text to get aligned like in scenario 3 if there is not enough space.</p>
  
  <p>How to do it with html/css only (without javascript)? I need it for a Joomla Homepage.</p>