Horizontal alignment, with text at top of image?

Hia! I have the text at the side of the image I want. As seen below.

https://image.ibb.co/bWWO0F/Capture.jpg

Yet, I am struggling to get the text at the TOP of the image, like my amazing drawing here...

https://image.ibb.co/ksgZ7v/Capture1.jpg

How may I do this?

Here is my HTML...

<div>
    <img style="vertical-align:middle" width="350" class="img-circle" align="top" src="image.jpg">
    <p>Works.</p>
</div>

Solution

Use flexbox.

.flexbox {
  display: flex;
  border: 1px solid;
  padding: 15px;
}

.img-circle {
  border-radius: 100%;
}

<div class="flexbox">
  <img style="vertical-align:middle" width="350" class="img-circle" align="top" src="http://placehold.it/350x350">
  <p>Works.</p>
</div>