JSFiddle - React, Tailwind, and code Playground

HTML

<figure id="myfig">
<figure id="mysubfig1" class=subfigure style="display: inline-block; width: 31%">
<img src="http://i.imgur.com/T2geA8K.jpg" /><figcaption class=subfigcaption>(a) short</figcaption>
</figure>
<figure id="mysubfig2" class=subfigure style="display: inline-block; width: 31%">
<img src="http://i.imgur.com/T2geA8K.jpg" /><figcaption class=subfigcaption>(b) Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet</figcaption>
</figure>
<figure id="mysubfig3" class=subfigure style="display: inline-block; width: 25%">
<img src="http://i.imgur.com/T2geA8K.jpg" /><figcaption class=subfigcaption>(c) short </figcaption>
</figure>
<figcaption><strong>Figure 1</strong>  A figure full of baby seals</figcaption>
</figure>

CSS

figure>figure>img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
}

figure {
  position: relative;
  text-align: center;
  margin:20px auto 20px;
  padding: 10px 0px 10px;
  width: 100%;
}

figure>figure {
  vertical-align: middle;
  position: relative;
  margin: 0px auto 5px;
  padding: 0px 4px 0px;
  max-width: 100%;
  height: auto;
}

figure>figure>figcaption {
  padding: 5px 0px 5px;
}

figure>figcaption {
  left: auto;
  right: auto;
  text-align: justify;
  margin: 0px auto 0px;
  padding: 10px 0px 5px;
  width: 90%;
    
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center; 
  -ms-flex-pack: center; 
  -webkit-justify-content: center;
  justify-content: center;
}