Creating a Flexbox-Grid where Items take the highest available space where they fit

Question

I am trying to archive a Grid where Items automatically take the highest available spot where they fit in, preferably in pure CSS:

I am not sure if it is even possible, but I thought there might be someone that enlightens me today :D

ATM I am stuck at this state, and nothing I tried brought me any closer to the Layout I wanted to archive.

Has anyone an Idea how to archive something like this?

Thanks a lot!

.wrapper {
  position: relative;
  margin: 0 10%;
  margn: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.card {
  background-color: green;
  height: 300px;
  margin: 0.5rem;
}

.card-1 {
  width: 33%;
}

.card-2 {
  width: 25%;
  height: 500px;
}

.card-3 {
  width: calc(42% - 3rem);
}

.card-4 {
  width: 40%;
}

.card-5 {
  width: 25%;
}

<div class="wrapper">
  <div class="card card-1"></div>
  <div class="card card-2"></div>
  <div class="card card-3"></div>
  <div class="card card-4"></div>
  <div class="card card-5"></div>
</div>

Demo on CodePen