Text align bottom responsive

HTML

<head>
  <link href="https://get.gridsetapp.com/35679/" rel="stylesheet" />
</head>

<li class="aside-open-close active">
  <a class="aside-opener" href="#">Q1. Question here.</a>
  <div class="slide">
    <div class="columns">

      <div class="d1-d3">
        <p>one</p>
        <p>two</p>
        <p>three</p>
        <p class="answer-box">three - The answer is three</p>
      </div>

      <div class="d4-d6 grey-border">
        <p>big text here</p>
      </div>

    </div>
  </div>
</li>

CSS

.aside-opener {
  font-size: 16px !important;
  font-weight: 600 !important;
}
.answer-box {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  /* width: 100%; */
  height: 290px;
}
.grey-border {
  border: 1px solid rgba(68, 68, 68, .54);
  margin-top: 15px;
}
.grey-border p {
  padding: 0 10px 0 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 19px;
}