Flex grow w/ align bottom

by Louis Walch

HTML

<div class="grid">
  <div class="top">TOP</div>
  <div class="bottom">
    ALIGN TEXT BOTTOM 
  </div>
</div>

SCSS

.grid {
        height: 100vh;
        display: flex;
        flex-direction: column;
       .top {
         padding: 40px;
         background-color: yellow;
         width: 100%;
       }
       .bottom {

text-align: right;
         flex-grow: 1;
         align-self: flex-end; /* This doesn't seem to work? */
         background-color: orange;
         width: 100%;
       }
    }