The empty space (you'll see when you put in the code) is where the cards should be stacked in a column like orientation like this

I am trying to fill that white space with the cards in that fashion but the sidebar keeps pushing it down and I've tried merging them and creating different divs to separate but no matter what it stays below and I do not know why.

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
  min-height: 100vh;
}

.Cards {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex: 1 1 0;
}

.header {
  display: flex;
  justify-content: flex-start;
  padding-inline-start: 10px;
  font-size: 30px;
  font-weight: 700;
  align-items: center;
  height: 72px;
  background: darkmagenta;
  color: white;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  background: #eee;
  color: darkmagenta;
}

.sidebar {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 700px;
  width: 300px;
  background: royalblue;
}

.sidebar a {
  margin: 0;
}

.card {
  border: 1px solid #eee;
  box-shadow: 2px 4px 16px rgba(0, 0, 0, .06);
  border-radius: 4px;
}

<div >
  MY AWESOME WEBSITE
</div>

<div >

  <div >
    <a href="google.com">⭐ - link one</a>
    <a href="google.com">