Masonry layout elements with dynamic height from left to right

Question

I have this layout, where elements have different height, and I need them to be placed from left to right. For example I put on one element red border and second blue border, one is under another in display, but I need the blue one to be next to right. And same goes to all elements, so basically just like flex, but the different height elements neeed to fill the empty space. Is there any simple way to do it?

<div class="columns">
  <div class="cell one">
    <img src="https://loremflickr.com/320/281?dummy=0">
  </div>

  <div class="cell two">
    <img src="https://loremflickr.com/320/255?dummy=1">
  </div>

  <div class="cell">
    <img src="https://loremflickr.com/320/237?dummy=2">
  </div>

  <div class="cell">
    <img src="https://loremflickr.com/320/264?dummy=3">
  </div>

  <div class="cell">
    <img src="https://loremflickr.com/320/250?dummy=4">
  </div>

  <div class="cell">
    <img src="https://loremflickr.com/320/248?dummy=5">
  </div>

  <div class="cell">
    <img src="https://loremflickr.com/320/264?dummy=6">
  </div>

  <div class="cell">
    <img src="https://loremflickr.com/320/288?dummy=7">
  </div>

  <div class="cell">
    <img src="https://loremflickr.com/320/206?dummy=8">
  </div>

  <div class="cell">
    <img src="https://loremflickr.com/320/299?dummy=9">
  </div>

  <div class="cell">
    <img src="https://loremflickr.com/320/229?dummy=10">
  </div>

  <div class="cell">
    <img src="https://loremflickr.com/320/288?dummy=11">
  </div>

  <div class="cell">
    <img src="https://loremflickr.com/320/245?dummy=12">
  </div>

  <div class="cell">
    <img src="https://loremflickr.com/320/299?dummy=13">
  </div>

  <div class="cell">
    <img src="https://loremflickr.com/320/282?dummy=14">
  </div>

  <div class="cell">
    <img src="https://loremflickr.com/320/215?dummy=15">
  </div>

  <div class="cell">
    <img src="https://loremflickr.com/320/228?dummy=16">
  </div>

  <div class="cell">
    <img src="https://loremflickr.com/320/224?dummy=17">
  </div>

  <div class="cell">
    <img src="https://loremflickr.com/320/215?dummy=18">
  </div>

  <div class="cell">
    <img src="https://loremflickr.com/320/222?dummy=19">
  </div>

  <div class="cell">
    <img src="https://loremflickr.com/320/224?dummy=20">
  </div>
</div>

body {
  margin: 0;
}

body,
body * {
  box-sizing: border-box;
}

.one{
  border: 3px solid red;
}

.two{
  border: 3px solid blue;
}

.columns {
  margin: 20px;
  column-gap: 10px;
  column-count: 3;
  

  .cell {
    margin-bottom: 10px;

    img {
      width: 100%;
      max-width: 100%;
      vertical-align: top;
    }
  }
}

Codepen: https://codepen.io/filipkrolikowski/pen/yLoQoeV