Equal height columns and align last item to bottom

Question

I have a list where each li has nested containers. I try to preserve the same height for all list items and push to the bottom the last div. How would I do this using flex ?

ul.list-container {
  display: inline-flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

ul.list-container > li {
  flex-grow: 1;
  min-width: 200px;
  background-color: #e3e3e3;
  height: 100%;
  width: 100%;
} 

ul.list-container > li > .pus-me-to-the-bottom {
  
  color: red;
  margin-top: 10px;

  // this should expand to the bottom
}

<ul class="list-container">
  <li>
    <div class="title">title</div>
    <div class="pus-me-to-the-bottom">title</div>
  </li>

   <li>
    <div class="title">
Audiam inciderint intellegebat ne est, cu pri quidam deseruisse persequeris, consetetur elaboraret duo at. Sed quod veniam disputando in. An nam ferri tollit, ea quod doming facete nam. Eum omittam periculis te, ad pri viris tempor.</div>
    <div class="pus-me-to-the-bottom">title</div>
  </li>
  
   <li>
    <div class="title">title</div>
    <div class="pus-me-to-the-bottom">title</div>
  </li>
  
   <li>
    <div class="title">title</div>
    <div class="pus-me-to-the-bottom">title</div>
  </li>

</ul>

and here is a codepen all what I was trying

Answer 1

ul.list-container {
  display: inline-flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
ul.list-container > li {
  display: flex;             /* new; nested flex container */
  flex-direction: column;    /* new; stack flex items vertically */
  flex-grow: 1;
  min-width: 200px;
  background-color: #e3e3e3;
  /* height: 100%;           <-- remove to enable equal height columns; see reference #1 */
  width: 100%;
  border: 1px solid red;
}
ul.list-container > li > .pus-me-to-the-bottom {
  margin-top: auto;          /* new; see reference #2 */
  color: red;
  /* margin-top: 10px;       <-- remove */
  border: 1px solid black;
}

<ul class="list-container">
  <li>
    <div class="title">title</div>
    <div class="pus-me-to-the-bottom">title</div>
  </li>
  <li>
    <div class="title">
      Audiam inciderint intellegebat ne est, cu pri quidam deseruisse persequeris, consetetur elaboraret duo at. Sed quod veniam disputando in. An nam ferri tollit, ea quod doming facete nam. Eum omittam periculis te, ad pri viris tempor.</div>
    <div class="pus-me-to-the-bottom">title</div>
  </li>
  <li>
    <div class="title">title</div>
    <div class="pus-me-to-the-bottom">title</div>
  </li>
  <li>
    <div class="title">title</div>
    <div class="pus-me-to-the-bottom">title</div>
  </li>
</ul>

References:

1. Equal Height Columns with Flexbox
2. Methods for Aligning Flex Items