JSFiddle - React, Tailwind, and code Playground

by Ricardo Ruiz

HTML

<div class="container">
  <div class="fe2">
    <img src="http://lorempixel.com/output/nightlife-h-c-500-700-3.jpg" alt="">
  </div>
  <div class="fe2 no-end">
    <div class="flex-cont-inner">
      <div class="message">
        <p>Lorem ipsum dolor sit amet, consecte adipng elit. Voluptas doloremque dig<span class="author">nissimos </span>repreh!</p>
      </div>
      <img src="http://lorempixel.com/output/city-q-c-500-200-4.jpg" alt="">
    </div>
  </div>
  <div class="fe2">
    <img src="http://lorempixel.com/output/nightlife-h-c-500-700-2.jpg" alt="">
  </div>

</div>

CSS

.container {
  max-width: 90%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

img {
  width: 100%;
  height: 100%;
  display: block;
}

.fe2 {
  flex: 1;
  text-align: center;
}

.flex-cont-inner {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.flex-cont-inner img {
  height: initial;
  margin-top: auto;
}

.message {
  font-size: 2.3vw;
  margin-top: auto;
}

.message p {
  color: blue;
  font-size: 2vw;
}

.author {
  position: relative;
}

.author:after {
  content: 'ANONYMUS';
  position: absolute;
  font-size: 1vw;
  color: red;
  top: 140%;
}