Flexbox

Flexbox Test

HTML

<div class="grid">
  <div class="content"><h3 class="title">Short Title</h3></div>
  <div class="content"></div>
  <div class="content"><p>1/1/17<br/>Sally Jones<br/>Snoopy</p></div>
  <div class="content"><p>Blah Blah blah Blah blah Blah blah.</p></div>
  <div class="content"><p>Blah Blah blah Blah blah Blah blah.</p></div>
</div>

<div class="grid">
  <div class="content"><h3 class="title">A really really really really really really really really really long title. Much longer than the previous titles. A really really really really really really really really really long title. Much longer than the previous titles. A really really really really really really really really really long title. Much longer than the previous titles. A really really really really really really really really really long title. Much longer than the previous titles.</h3></div>
  <div class="content"></div>
  <div class="content"><p>1/1/17<br/>Sally Jones<br/>Snoopy</p></div>
  <div class="content"><p>Blah Blah blah Blah blah Blah blah.</p></div>
  <div class="content"><p>Blah Blah blah Blah blah Blah blah.</p></div>
</div>

SCSS

.grid {
  display: grid;
  grid-auto-rows:
    minmax(auto, 1fr)
    minmax(auto, 1fr)
    minmax(auto, auto)
    minmax(auto, auto);
  grid-template-columns: repeat(2, 1fr);
  margin: 20px;
}

.content {
  display: flex;
  align-items: center;
  padding: 0 15px;
  
  &:nth-child(1),
  &:nth-child(4),
  &:nth-child(5) {
    grid-column: 1 / 5;
  }
  
  &:nth-child(1) {background-color: silver;}
  &:nth-child(2) {background-color: grey;}
  &:nth-child(3) {background-color: maroon;}
  &:nth-child(4) {background-color: olive;}
  &:nth-child(5) {background-color: green;}
}