每行弯曲多个可折叠元素

Question

flex div中有多个可折叠元素，但是当我仅从行扩展一个元素时，它将所有内容从该行向下推送。我有一个例子 在JSFiddle中，有人可以帮忙吗？谢谢

JSFiddle：https://jsfiddle.net/zsc1pnxj/1/

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