JSFiddle - React, Tailwind, and code Playground

HTML

<figure>
<div class="img"><img src="http://molily.de/img/spidermum.jpg"></div>
<figcaption>Alle meine Entchen schwimmen auf dem See, Köpfchen in das Wasser, Schwänzchen in die Höh.</figcaption>
</figure>

CSS

figure {
  border: 1px solid green;
}

figure > * {
  border: 1px solid red;
}

figure {
  display: table;
}

figure > * {
  display: table-cell;
  vertical-align: middle;
}

figcaption {
  padding-left: 1em;
}

.flexbox figure {
  display: flex;
  align-items: center;
}

.flexbox .img {
  flex-shrink: 0;
}

JavaScript

if ('flexBasis' in document.documentElement.style) {
    document.documentElement.className += ' flexbox';
}