JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<body>
<figure>
   <img src="https://dummyimage.com/300x150/ffff00/ff0000"/>
  <figcaption>Lorem ipsum dolor sit amet, this might be narrower/wider than the image above or completely omitted.</figcaption>
</figure> 
<br/>
<figure>
   <img src="https://dummyimage.com/2000x150/ffff00/ff0000"/>
  <figcaption>Lorem ipsum dolor sit amet, this might be narrower/wider than the image above or completely omitted.</figcaption>
</figure> 
<br/>
<figure>
   <img src="https://dummyimage.com/100x50/ffff00/ff0000"/>
  <figcaption>Lorem ipsum dolor sit amet, this might be narrower/wider than the image above or completely omitted.</figcaption>
</figure> 
</body>

CSS

*
{
   margin:     0;
   padding:    0;
   box-sizing: border-box;
}

body 
{
  border: 1px solid red;
  width: 300px;
}

figure, figcaption
{
   border:     1px solid blue;
   background: gray;
}

figure
{
   display:             table;
   border-bottom-width: 0;
}

figcaption
{
   display:          table-caption;
   caption-side:     bottom;
   border-top-width: 0;
}

figure img
{
   border:    1px solid green;
   max-width: 100%;
}