CSS列 - 展开一个元素而不重新排列

Question

我无法在任何地方找到相同的情况，我已经浪费了过多的时间。

我正在尝试实现一个正常的webkit列，其中元素可在y方向上单击/展开。

我画了这张照片来解释我的意思：

问题在于，当我展开一个元素时，会重新排列列元素，以便所有列再次变为相同的高度，这会弄乱整个视图。

以前有人遇到过这个问题吗？我试图通过这个，而不依赖于jquery / javascript，因为这是一个React.js应用程序，我试图不混合这两个。

CSS：

.in-columns-small {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
}
.in-columns-small div {
 -webkit-column-break-inside: avoid;
 page-break-inside: avoid;
 break-inside: avoid;
}

其中in-columns-small是包含div的较大正方形