Pushing Sign Up & Login buttons to bottom of sidebar - reactjs

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;
...
}