Text align bottom responsive

HTML

<ul>
  <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>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur labore qui tenetur officia, hic illum fugit deleniti Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, numquam, reiciendis! Iste quasi veniam mollitia alias autem sunt hic, dolorum facilis voluptatum ducimus, aut dolores. </p>
        </div>

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

CSS

* {
  margin: 0;
  padding: 0;
}

li {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.slide {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.columns {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.d1-d3 {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.aside-opener {
  font-size: 16px !important;
  font-weight: 600 !important;
}

.answer-box {
  margin-top: auto;
  text-align: right;
}

.grey-border {
  border: 1px solid rgba(68, 68, 68, .54);
}

.grey-border p {
  padding: 0 10px 0 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 19px;
}