Position figcaption vertically centered and next to image?

Question

I have an image and a caption within a figure tag. I was wondering how I can get the figcaption positioned next to the img and vertically centered, like the image attached.

Here's a jsfiddle I set up.

Thank you!

Answer 1

Here you go, just replace the css with following:

html { font-family: 'Helvetica-Neue', Arial, Helvetica; font-size: 1em; line-height: 1.4; letter-spacing: 1px; color:white; }
figure { float:left; padding:20px; display:block; background:#ffa2df; position:relative; }
.width { width:50%; }
.height { height:15em; }
img { width:auto; height:100%; float:left;}
figcaption { background:#5800ff; height:100%; display:flex; justify-content: center;
flex-direction: column;
text-align: center; 
float:left; 
}