Pushing Sign Up & Login buttons to bottom of sidebar

Question

I am trying to recreate this design:

Click to view

However, the below is currently occurring.

Click to view

I am trying to push the SignUp and Login buttons to the bottom of the sidebar to match the first image. Am I missing a CSS class that would allow me to do so, or would this be a JS configuration? Hope I have not overlooked something basic that would allow me to achieve this state.

Sidebar.js

import React from "react";
import "../App.css";
import { SidebarData } from './SidebarData'
import Logo from './Logo.svg'
import { Login } from './Login'
import { SignUp } from './SignUp'

function Sidebar() {
    return ( 
    <div className="Sidebar">
            <div className="Header">
        <div><img src = {Logo} alt='Logo’ className='Logo’ /></div>
            </div>
            <div class="line-break" />
           <ul className="SidebarList">
               {SidebarData.map((val, key) => {
                 return (
                  <li 
                    key={key} 
                    className="row"
                    id={window.location.pathname == val.link ? "active" : ""}
                    onClick={() => {
                        window.location.pathname = val.link;
                        }}
                    >
                      <div id="icon">{val.icon}</div> <div id="title">{val.title}</div>
                      </li>
               );
               })}
        
            </ul>
            <div class="line-break" />
<div className="footer">
            <ul className= "SidebarList">
                {Login.map((val, key) => {
                    return (
                        <li
                        key={key}
                        className="Login"
                        id={window.location.pathname == val.link ? "active" : ""}
                        onClick={() => {
                            window.location.pathname = val.link;
                        }}
                        >
                            <div id="title">{val.title}</div>
                        </li>
                    )}
                
                )}
                
                 </ul>

                 <ul className= "SidebarList">
                {SignUp.map((val, key) => {
                    return (
                        <li
                        key={key}
                        className="SignUp"
                        id={window.location.pathname == val.link ? "active" : ""}
                        onClick={() => {
                            window.location.pathname = val.link;
                        }}
                        >
                            <div id="title">{val.title}</div>
                        </li>
                    )}
                
                )}
                 </ul>
                 </div>
                 </div>

Here is CSS

.App {
    width: 100vw;
    height: 100vh;
  }
  
  body {
    margin: 0;
    padding: 0;

  }

.Sidebar {
    height: 100%;
    width: 300px;
    background-color: white;
    border-right: 1px solid #F0F4FB;
    padding-left: 15px;
    box-sizing: border-box;

  }

  .SidebarList {
    height: auto;
    width: 100%;
    padding-left: 15px;
    font-size: 18px;
    border: 2px #FD954E;
    box-sizing: border-box


  }

  .SidebarList .row {
      width: 100%;
      height: 50px;
      background-color: white;
      list-style-type: none;
      margin: 0%;
      padding-bottom: 15px;
      display: flex;
      color: #A7ACB6;
      justify-content: center;
      align-items: center;
      font-family: Arial, Helvetica, sans-serif;

  }



.SidebarList .row:hover {
  cursor: pointer;
  background-color: #E7E7E7  ;
}

.SidebarList #active {
  background-color: white;
  color: #FD954E
}


.SidebarList .Login {
background-color: white;
color: #FD954E;
width: 90%;
height: 5vh;
right: 1596px;
top: 958px;
border: 1px solid #FD954E;
box-sizing: border-box;
border-radius: 19.5px;
text-align: center;
font-family: Arial, Helvetica, sans-serif
}

.SidebarList .SignUp {

  width: 90%;
  height: 5vh;
  right: 1596px;
  top: 1011px;
  
  background: #FD954E;
  border-radius: 19.5px;
  border: none;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  }

  .row #icon {
    flex: 30%;
    display: grid;
    place-items: center;
    transform: scale(1.2)

  }

  .row #title {
    flex: 70%;
  }



.Logo {
  padding-left: 25px;
  padding-top: 25px;
  padding-bottom: 30px;
  width: 55%;

}

.line-break {
  height: 1px;
  width: 100%;
  background-color: #F0F4FB;
}

ul.nav {
  list-style-type: none;
  padding: 20px 0 0 40px;
      list-style-type: none;

}

ul.nav li {
  margin-bottom: 14px;
  list-style-type: none;

}

ul.nav li:last-child {
  margin-bottom: 0;
  list-style-type: none;

}

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.footer button {
  padding: 6px 0;
  width: 80%;
  margin-bottom: 14px;
}

.footer button:last-child {
  margin-bottom: 0;
}

.header .Logo {
  height: 40px;
  width: 200px;
  background-color: grey;
  margin: 20px;
}

Answer 1

Without seeing the source for the entire page and not just a couple of the buttons, it is impossible to say for sure, but my guess would be the following is causing your problem:

.Sidebar {
    height: 100%;
    ...
}

Setting height: 100% will only tell the sidebar to take up 100% of the space it needs for its content (or 100% of the height of its bounding container, depending on the display properties of both). I would recommend changing it to this to solve your problem:

.Sidebar {
    min-height: 100vh;
    ...
}