How to float div dynamicly?

Question

I have some posts on my timeline and want to have each of them with a width of 50% so that I always have two of them side by side (post have different heights, as you can see on the picture). But I dont know how to use float correctly to avoid these empty spaces.

I tried making a div with display:block; around all divs with class="post-wrapper", and then set all post-wrapper to display:inline-block; but it was the same result as before.

Each post looks like that:

html:

<div class="post-wrapper">
  <div class="post-content-wrapper">
    <div class="post-content">
       <h4>year month</h4>
       <h3>headline....</h3>
       <p>some text</p>
     </div>
  </div>
</div>

css:

.post-content-wrapper {
  padding: 18px 25px;
}

.post-content {
  position: relative;
  border-radius: 25px;
  border-style: solid;
  border-width: 2px;
  border-color: transparent;
  background-color: var(--primary-bg-color);
  box-shadow: var(--primary-box-shadow-post-content) var(--primary-accent-color),
    var(--secondary-box-shadow-post-content) var(--secondary-accent-color);
}
.post-content h4 {
  color: var(--primary-font-color);
  padding: 15px 30px 0px;
}
.post-content h3 {
  color: var(--primary-font-color);
  padding: 0px 30px 10px;
  font-size: 26px;
  line-height: 34px;
}
.post-content p {
  color: var(--primary-font-color);
  padding: 0px 30px 20px;
  font-size: var(--primary-font-size);
  line-height: 24px;
}
.post-wrapper {
  width: 50%;
  float: left;
}