In an ul element of long Height how to have two element in bottom

Question

I have an simple ul element which have large height, I want last two li elements on the bottom of ul element and rest on top.

You can see the current implementation here.

Code is like this:

.my-ul {
  height: 90vh;
  width: 40%;
  background-color: grey;
}

<div id="demo">
  <ul class="my-ul">
    <li>First Element</li>
    <li>Second Element</li>
    <li>Third Element</li>
    <li>Fourth Element</li>
    <li>Fifth Element</li>
  </ul>
</div>

I tried solutions from here and here, but these are not working.

Answer 1

Solution I see here is flexbox

ul {
  display: flex;
  flex-direction: column;
  height: 300px;
  justify-content: flex-start;
}

ul li:nth-last-child(2) {
  margin-top: auto;
}

<ul>
  <li>first</li>
  <li>first</li>
  <li>first</li>
  <li>first</li>
  <li>first</li>
  <li>first</li>
</ul>