Float text to the right of figure and figcaption

Question

I discovered the "figure" and "figcaption" elements today. How do I wrap text next (right) to the image and caption.

<div>
<img alt="Hannibal Regional Medical Building" src="https://hannibalregionalmedicalgroup.org/Portals/0/locations/hannibal_regional_medical_building_375.jpg" width="375" height="178" style="text-align: left;" />
<figcaption>Hannibal Regional Medical Building</figcaption>
</div>
<div>
 <p>
 <span>Hannibal Regional Medical Group 
 <br />
 6500 Hos​pital Drive<br />
 Hannibal, MO  63401
 </span>
 </p>
</div>
<div>
<p><span>To make an appointment,<br />
please call 573-629-3500
</span>
</p>
</div>

Answer 1

The HTML <figcaption> element represents a caption or a legend associated with a figure or an illustration described by the rest of the data of the <figure> element which is its immediate ancestor.

Permitted parents: A <figure> element; the <figcaption> element must be its first or last child. -MDN

That means using a <div> tag as the immediate ancestor for a <figcaption> is invalid HTML in your example. To fix that you need to replace the <div> with <figure>.

<figure>
  <img src="" alt="">   
  <figcaption>...</figcaption>
</figure>

And to make the rest of text to display on the right hand, there are many options, such as using float is the most common way.

figure {
  float: left;
}