CSS砌体布局：图块的动态高度问题

Question

场景：

我正在尝试使用CSS column属性来实现砌体布局。 （通过引用this）。

我之前尝试过的事情

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;
}

请参见此Codepen，了解我要实现的目标。

单击布局中的图块（例如第二个图块）时，会向其中添加一些内容，并且需要增加其高度，并在初始渲染的同一位置处增长。

问题：

当其高度增大时，随后的图块将移至下一列。在添加内容之前和之后，查看第3个图块的位置。

限制：

• 使用display: inline-block或float没什么区别。
• 不能使用jQuery或任何其他插件。

问题：

如何避免磁贴与动态添加的内容来回移动？