如何消除两列布局中flexbox项之间的空白？

Question

我正在尝试开发一个Flexbox容器，其中包含堆叠在两列中的多个项目。这些项目最初具有相等的高度，但可以在单击时折叠。折叠后的物品可以具有可变的高度。

问题是折叠的项目在另一列中产生空白。如何消除物品之间的空间？ Flexbox甚至可能吗？

column-count可以很好地实现它，但是它垂直排列项目，如：

1 3

2 4

我需要像这样的水平排序：

1 2

3 4

我也尝试了Grid Layout，但是没有运气。

$('.item').click(function() {
  $('.item').css('height', '50px');
  $(this).css('height', '80px');
});

.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex: 50%;
  height: 50px;
}
.item-1 {
  background: blue;
}
.item-2 {
  background: green;
}
.item-3 {
  background: yellow;
}
.item-4 {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="item item-1">#1</div>
  <div class="item item-2">#2</div>
  <div class="item item-3">#3</div>
  <div class="item item-4">#4</div>
</div>