CSS Masonry Layout: problem with dynamic height of tiles

Question

Scenario:

I am trying to implement masonry layout using CSS column property. (By refering this).

What I tried beforehand

HTML:

<div class="container">
  <div class="child item1">
    <div class="content">
      Some content 1
    </div>
    <div class="placeholder"></div>
  </div>
  <div class="child item2">
    <div class="content">
      Some content 2
    </div>
    <div class="placeholder"></div>
  </div>
  <div class="child item3">
    <div class="content">
      Some content 3
    </div>
    <div class="placeholder"></div>
  </div>
  <div class="child item4">
    <div class="content">
      Some content 4
    </div>
    <div class="placeholder"></div>
  </div>
  <div class="child item5">
    <div class="content">
      Some content 5
    </div>
    <div class="placeholder"></div>
  </div>
</div>

JS:

var children = document.querySelectorAll(".child");

for (var i = 0; children.length; i++) {
  children[i].addEventListener("click", function() {
    var placeholder = this.querySelector(".placeholder");

    placeholder.innerHTML +=
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
  });
}

CSS:

.container {
  width: 100%;
  column-count: 2;
  column-gap: 16px;
}

.child {
  width: 100%;
  margin-bottom: 16px;
  border: 1px solid red;
  break-inside: avoid;
  display: inline-block;
}

.content {
  width:100%;
  break-inside:avoid;
}

.placeholder {
  float: left;
}

.child:nth-child(odd) {
  min-height: 100px;
}

.child:nth-child(even) {
  min-height: 40px;
}

Kindly see this Codepen for the implementation of what I want to achieve.

When the tile in the layout is clicked, for example 2nd tile, some content is added to it and it is required to grow in height, and grow at the same position it is rendered initially.

Problem:

When its height grows, the subsequent tile shifts to next column. See 3rd tile's position before and after the content getting added.

Limitation:

• Using display: inline-block or float does not make any difference.
• Can not use jQuery or any other plugin.

Question:

What can be done to avoid a tile shifting back or forth with dynamically added content?