Vertical Tabs with list-items (need button to sit at bottom of text)

https://cello-badger-a8a3.squarespace.com/?password=demo

I've created Vertical Tabs using a .user-items-list-section

It's pretty much working as expected EXCEPT for the button. How can I get the button to sit at the bottom of the text?

This is my code thus far.

/* list container */
ul.user-items-list-item-container.user-items-list-simple {
    display: flex;
      grid-gap: 0 !important;
    padding:0;
      width: 100%;
}
li.list-item {
  width: 0% !important;
  cursor: pointer;
}

/* *** title *** */
.list-item-content__title {
    writing-mode: vertical-rl;
    height: 100%;
    display: flex;
    align-items: start;
    justify-content: end;
    width: 40px;
    transform: rotate(180deg);
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

/* hidden content */
li.list-item {
    height: 375px !important;
    padding:3% !important;
    webkit-transition: 0.8s;
     -o-transition: 0.8s;
    transition: 0.8s;
    position: relative;
    overflow: hidden;
    list-style: none;
}
/* description */
.list-item-content__description {
    background: @light1;
      text-align: left !important;
      overflow: scroll;
    width: 85%;
    height: 100%;
    position: absolute;
    right: 0;
    top:0;
      margin-top: 0 !important;
    opacity: 0;
    padding:30px;
    box-sizing:border-box;
    webkit-transition: 0.8s;
    -o-transition: 0.8s;
    transition: 0.8s;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}
  
/* button */
.list-item-content__button-container {
    background: blue;
      text-align: left !important;
      overflow: scroll;
    width: 85%;
    height: 20%;
    position: absolute;
    left: 40%;
    top: 0px;
      margin-top: 0 !important;
    opacity: 1;
    padding:10px;
    box-sizing:border-box;
    webkit-transition: 0.8s;
    -o-transition: 0.8s;
    transition: 0.8s;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}
/* *** active tab *** */
li.list-item.active {
    width: 100% !important;
}
li.list-item.active .list-item-content__description {
    opacity: 1;
    -webkit-transition-delay: 0.6s;
    -moz-transition-delay: 0.6s;
    -o-transition-delay: 0.6s;
    transition-delay: 0.6s;
    transform: none;
}

li.list-item.active .list-item-content__title {
    left:25px;
    right:auto;
    margin:0;
}

Thank you!

demo is incorrect password

@tuanphan I'm working on the same thing on this site. I have managed to get the button to sit at the bottom of the container (so it's kind of floating in mid air), but I would still prefer for it to sit at the bottom of the text if it has to scroll.

https://parrotfish-spinach-nwzs.squarespace.com/?password=demo

Thank you for your help!