CSS inline-block uneven spacing

Question

So I have two columns of cards and each card has the inline-block property. Each is of variable height so there is uneven white space in between each card like so:

Short of having two separate columns, how can I get spacing between each card even?

I'm aiming for this layout:

Answer 1

Either use column layout, like so:

.cards {
  columns: 300px 2;
}

.cards div {
  display: inline-block;
}

Or use a flex layout:

.cards {
  display: flex;
  flex-direction: row; /* or column if you want them displayed vertically */
}
.cards div {
  flex: 1 1 auto;
}

Or if you just want them displayed at the top always:

.cards div {
   display: inline-block;
   vertical-align: top;
}