CSS: Keep paragraphs together while wrapping (floating)

• I have a floating image on the left side.
• Elements on the right side (text, images ...) should wrap around it.
• The title of an image should not be wrapped separately from the image, when the screen becomes too small).

Image: Window is big enough

(grey background added for clear distinction of the element)

Code

<!DOCTYPE html><html><body>

<div style="float:left"> 
  <img style="width:150px; height: auto" src="chrome://branding/content/about-logo@2x.png" /> 
</div>
<p>
  foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo 

  <div style="background-color: lightgrey;">
  Image title<br>
  <img style="width:120px; height: 40px" src="chrome://branding/content/about-logo@2x.png" />
  </div>
</p>

</body></html>

Image: Window is too small (actual)

Image: Window is too small (expected)