How do I move content from the bottom to the right of a sidebar?-CodePudding

I'm working through some self guided coding curriculum and currently doing a small project building a holy grail layout with flexbox. Here is my codepen https://codepen.io/clayco/pen/KKeNjrm

Currently, all of the cards are displayed under the sidebar when they should be to the right of it.

I'm guessing it has something to do with the flex direction of the body being set to column, but I've tried changing the flex directions around and it doesn't help the problem.

Anyways, here's my code.

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.header {
  height: 72px;
  background: darkmagenta;
  color: white;
  font-size: 32px;
  font-weight: 900;
  align-items: center;
  display: flex;
  text-indent: 16px;
}

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

.sidebar {
  width: 300px;
  background: royalblue;
  display: flex;
  min-width: 300px;
  height: calc( 100vh - 72px);
  flex-direction: column;
  gap: 50px;
}

.container {
  display: flex;
  flex-grow: 1;
}

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

.cards {
  padding: 32px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  gap: 50px;
  width: 1000px;
}

<div >
  MY AWESOME WEBSITE
</div>

<div >
  <div >
    <ul>
      <li><a href="#">⭐ - link one</a></li>
      <li><a href="#">