image row

HTML

<div class="parent">
<figure>
<img src="https://unsplash.it/200/300" alt="...">
<figcaption>The img description goes here</figcaption>
</figure>
<figure>
<img src="https://unsplash.it/500/500" alt="...">
<figcaption>The img description goes here</figcaption>
</figure>
<figure>
<img src="https://unsplash.it/400/200" alt="...">
<figcaption>The img description goes here</figcaption>
</figure>
<figure>
<img src="https://unsplash.it/350/450" alt="...">
<figcaption>The img description goes here</figcaption>
</figure>
</div>

CSS

.parent {
  height:300px;
  display:flex;
  width:100%;
}

figure {
  height:100%;
  overflow:hidden;
  margin: 5px;
}

img {
  height:200px;
  width:200px;
}

figcaption {
  font-family:verdana;
  color:#ff0099;
}