Html 每行调整多个可折叠元素

我在一个flex div中有多个可折叠元素，但当我只从行中展开一个元素时，它会将该行中的所有内容向下推。我有一个例子 在JSFIDLE，有人能帮忙吗？谢谢

JSFiddle：

标题1
1.
标题2
2.
标题3
3.
标题4
4.

行具有基于内容的高度。因此，当内容展开时，行也会展开。不确定你最终想要什么。也许可以为行设置一个固定的高度？当我展开/折叠标题1时，我希望标题4保持在标题2下而不移动。

<div class="element-collapsable">
                <div class="header-element" data-toggle="collapse" data-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample">
                    Header 1
                </div>
                <div class="body-element collapse show" id="collapseExample1">1</div>
            </div>

            <div class="element-collapsable">
                <div class="header-element collapsed" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample">
                    Header 2
                </div>
                <div class="body-element collapse" id="collapseExample2">2</div>
            </div>

            <div class="element-collapsable">
                <div class="header-element collapsed" data-toggle="collapse" data-target="#collapseExample3" aria-expanded="false" aria-controls="collapseExample">
                    Header 3
                </div>
                <div class="body-element collapse" id="collapseExample3">3</div>
            </div>

            <div class="element-collapsable">
                <div class="header-element collapsed" data-toggle="collapse" data-target="#collapseExample4" aria-expanded="false" aria-controls="collapseExample">
                    Header 4
                </div>
                <div class="body-element collapse" id="collapseExample4">4</div>
            </div>