CSS grid equal height rows inside 3 column layout

Question

I have a CSS grid layout that looks like this....

  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .grid-item {
    background-color: #f2f2f2;
    padding: 10px;
  }

  .title {
    background: blue;
    color:white;
    margin: 0;
  }

  .description {
    background: yellow;
    margin: 0;
  }

  .footer {
    color:white;
    background: red;
    margin: 0;
  }

<div class="grid-container">
  <div class="grid-item">
    <h4 class="title">Title 1 which is longer than the others to test what happens with a longer title that spans multiple lines</h4>
    <p class="description">Maecenas vel volutpat mauris, sit amet cursus justo. Fusce euismod libero turpis, sed congue est ultricies non. Donec pharetra, metus a ornare maximus, ligula ipsum dapibus justo, eget pretium augue est eget nisl. Etiam posuere, turpis ac maximus malesuada, mi tortor hendrerit ipsum, eu lobortis augue ligula sit amet neque. Nullam ultrices velit quis lobortis volutpat. Nunc dapibus vitae diam ut mollis. Donec ut laoreet mauris. Nullam molestie eros sit amet pharetra scelerisque. Aenean placerat nunc nec quam imperdiet, eget vestibulum nisl consequat. Sed sodales, mi ut sodales vestibulum, orci felis condimentum diam, ut congue mauris risus et nisl. Integer et nunc vel odio commodo cursus vel a odio. Pellentesque et malesuada diam, eu pharetra nisi. Curabitur in mattis enim. Phasellus eu dolor risus. Mauris facilisis ac tortor vel dapibus. Donec tincidunt, nisl ac mollis malesuada, tellus nisl laoreet turpis, eget rutrum lorem augue non augue.</p>
    <p class="footer">Footer section which also contains some content 1</p>
  </div>
  <div class="grid-item">
    <h4 class="title">Title 2</h4>
    <p class="description">Description 2 which is not as long as the first but has some content</p>
    <p class="footer">Footer 2</p>
  </div>
  <div class="grid-item">
    <h4 class="title">Title 3 which is not as long</h4>
    <p class="description">Description 3</p>
    <p class="footer">Footer 3 is a much longer footer than the others to span 2 lines</p>
  </div>

</div>

I want all of the rows in each of the column to match the height regardless of the content. So in the example I want it to look like this...

Is this achievable using CSS grid? I have attempted this with flexbox and wasn't able to do it, I have also seen plugins like matchheight.js but would rather avoid using a plugin if I don't have to