JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="toggleBorders()">Toggle Borders</button>
<div class="box-holder">
  <div class="box">
    <div class="content">
      <h1>1. Example Title</h1>
      <p>Good Example</p>
      <span>Example link to the article</span>
    </div>
  </div>
  <div class="box">
    <div class="content">
      <h1>2. Title</h1>
      <p>Min Width Good Example</p>
      <span>Example link to the article</span>
    </div>
  </div>
  <div class="box">
    <div class="content">
      <h1>3. Example Title</h1>
      <p>But when the description gets too long then it expands the content div</p>
      <span>Example link to the article</span>
    </div>
  </div>
   <div class="box">
    <div class="content">
      <h1>4. Example Title</h1>
      <p class="abs">Setting absolute position avoids expansion but messes up the vertical layout</p>
      <span class="abs">Example link to the article</span>
    </div>
  </div>
   <div class="box">
    <div class="content">
      <h1>5. Also Long Titles Leave White Space</h1>
      <p>This doesn't look centered, see 6</p>
      <span>Example link to the article</span>
    </div>
  </div>
   <div class="box">
    <div class="content">
      <h1>6. Also Long Titles<br>Leave White Space</h1>
      <p>Manually breaking lines fixes this</p>
      <span>Example link to the article</span>
    </div>
  </div>
</div>

CSS

.box-holder {
  display: flex;
  flex-flow: row wrap;
}
.box {
  flex: 0 0 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 350px;
  border: 1px solid blue;
}
.content {
  max-width: 80%;
  position: relative;
}
.content-bordered {
  border: 1px solid red;
}
.bordered {
  border: 1px solid green;
}
p {
  width: 75%;
}
.abs {
  position: absolute;
}
button {
  position: fixed;
}

JavaScript

function toggleBorders() {
  $('h1, p, span').toggleClass('bordered');
  $('.content').toggleClass('content-bordered');
}