如何在高度变化时让元素保持其在列结构中的位置

Question

我已经整理了一个CodePen来说明我试图解决的问题 - http://codepen.io/nicknoop/pen/rMgPXX。

使用CSS列显示元素;在每个元素中都有一些隐藏的文本，通过jQuery显示。如果我在第三列（4个中）中展开元素，则展开的元素将跳转到第二列的底部。据推测，浏览器在列之间平均分配空间，导致此问题（我已经看到浏览器之间存在一些差异）。

我想知道是否有办法在元素展开时保持元素的位置，即留在第3列。

以下是我一直在使用的代码：

HTML：

<div class="container">
  <div class="inner">
    <div class="inner-head"></div>
    <h6>click to reveal text - <span class="highlighted">to be viewed with 4-columns, min width 960px</span></h6>
    <div class="inner-body">
      <div class="inner-arrow">&darr;</div>
      <p class="inner-p">
        Some text in here with varying lengths!
      </p>
    </div>
  </div>
.
. repeating this "inner" div to create different elements.
.
</div> <!-- end container --> 

CSS：

.container {
  color: #444;
  column-count: 2;
  column-gap: 5px;
  column-width: 10em;
  height: auto;
  margin: 0 auto;
  max-width: 960px;
  padding: 0 20px;
  width: 100%;
}
  @media screen and (min-width: 600px) {
    .container {
      column-count: 3;
    }
  }
  @media screen and (min-width: 960px) {
    .container {
      column-count: 4;
    }
  }

.inner {
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.07);
  column-break-inside: avoid;
  display: inline-block;
  margin: 5px;
  padding: 10px;
  width: 90%;
}
.inner-head {
  background: rgba(0,0,0,.4);
  height: 100px;
  margin-bottom: 10px;
  width: 100%;
}
.inner h6 {
  color: #777;
  margin-bottom: 5px;
  text-align: center;
}
.inner-arrow {
  background: #002;
  border-radius: 5px;
  color: red;
  cursor: pointer;
  margin: 0 auto;
  text-align: center;
  width: 30px;
}

.highlighted {
  color: tomato;
}

JS：

jQuery(document).ready(function() {

    jQuery(document).ready(function(){
        jQuery('.inner .inner-p').slideUp();
        jQuery('.inner .inner-arrow').click(function(){
            jQuery(this).next('.inner .inner-p').slideToggle('slow');
        });
    });

});