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!
[![enter image description here](https://i.stack.imgur.com/Xm32F.png)](https://i.stack.imgur.com/Xm32F.png)