Q:

Make text wrap under text only when image is present

I'm attempting to align text to the right or left of an image. This is easily achieved with float or flex. However, I'm attempting to do this with vertical align.
What I'm seeing is, I can give the impression that the text is floating left or right by using the vertical align.
The problem I have is, when the amount of text exceeds the width of the container, the text breaks (as expected) to a new line. But instead of being a new line straight underneath the original, and still to the right/left of the picture, the break inserts the text under the image.
Some very trivial code demonstrates this
<img src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" style="vertical-align:top"/> Please  enter lots of words

https://jsfiddle.net/metkc72p/
I don't want to use float or flex as the purpose of this is to understand the limitations. 
My question is purely if I can do anything about this awkward splitting. 
The image demonstrates this well. The first is what I'm trying to achieve, the second is what I'm currently getting!

A:

Your image and your text are both inline-level elements.
From the browser's perspective, the image and the text are all on the same line.
From your perspective, imagine the image to be just another word on the line, but with font-size: 3em.
Because of the taller height of the image, the text is forced to wrap far below, resulting in a tall gap within the paragraph.
But if the text and image are equal size, then the wrapping looks more natural.

img {
  height: 15px;
}
<img src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png"> Here is some content... I'm hoping there is enough content so that it runs over multiple 'lines' (rows) so you can see where the text breaks, it ends up underneath
the image. I'd expect there to be 3 or 4 rows of text until it breaks like this, and not break at the first

revised demo
If you don't want the text to wrap under the image, use another method, such as flexbox:

body {
  display: flex;
}
<img src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png"> Here is some content... I'm hoping there is enough content so that it runs over multiple 'lines' (rows) so you can see where the text breaks, it ends up underneath
the image. I'd expect there to be 3 or 4 rows of text until it breaks like this, and not break at the first

