JSFiddle - React, Tailwind, and code Playground

by t2t2

HTML

<div class="testimonial-wrapper">
  <div class="testimonial">
    <div class="testimonial-content">
      <i class="icon">"<!-- too lazy to get a real icon --></i>
      <p>Clear benefit of Weekdone is that we are more aligned, structured and people feel more connected.</div>
    <p class="testimonial-author">- Kaspar von Grünberg, CEO</p>
  </div>
  <div class="testimonial-image" style="background-image: url('https://placekitten.com/300/400');"></div>
</div>

<div class="testimonial-wrapper">
  <div class="testimonial">
    <div class="testimonial-content">
      <i class="icon">"<!-- too lazy to get a real icon --></i>
      <p>Clear benefit of Weekdone is that we are more aligned, structured and people feel more connected. Clear benefit of Weekdone is that we are more aligned, structured and people feel more connected.</p>
    </div>
    <p class="testimonial-author">- Kaspar von Grünberg, CEO</p>
  </div>
  <div class="testimonial-image" style="background-image: url('https://placekitten.com/300/400');"></div>
</div>

<div class="testimonial-wrapper">
  <div class="testimonial">
    <div class="testimonial-content">
      <i class="icon">"<!-- too lazy to get a real icon --></i>
      <p>Clear benefit of Weekdone is that we are more aligned, structured and people feel more connected. Clear benefit of Weekdone is that we are more aligned, structured and people feel more connected. Clear benefit of Weekdone is that we are more aligned, structured and people feel more connected. Clear benefit of Weekdone is that we are more aligned, structured and people feel more connected. </p>
    </div>
    <p class="testimonial-author">- Kaspar von Grünberg, CEO</p>
  </div>
  <div class="testimonial-image" style="background-image: url('https://placekitten.com/300/400');"></div>
</div>

PostCSS (Stage 0+)

.testimonial-wrapper {
  display: flex;
  min-height: 400px;
  color: #ffffff;
  background: #2979ff;
  margin: 1em;
}

.testimonial {
  flex: 1 1 auto;
  padding: 1em;
  display: flex;
  flex-direction: column;
}

.testimonial-content {
  flex: 1 0 auto;
  padding: 1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  
  & > i {
    font-size: 3em;
  }
  & > p {
    font-size: 2em;
  }
}

.testimonial-author {
  text-align: right;
}

.testimonial-image {
  flex: 0 0 30%;
  background-repeat: none;
  background-position: center center;
  background-size: cover;
}