CSS：浮动无序列表元素行之间的位置元素

Question

我尝试修改一些CSS布局而且卡住了。我有一个无序的元素列表，它跨越100％的宽度并浮动到左边：

现在，每个列表元素都包含一个（默认隐藏）容器，其中包含此元素的更多详细信息。如果单击元素，这些详细信息应该是可见的（一次只能显示一个）。现在有我的问题。这些详细信息应显示在单击元素所在的行下方，并且应按下所有其他元素。像这样：

现在我被卡住了。我通过在详细信息元素上使用position:absolute并使用JavaScript在同一行中的所有元素上分配margin-bottom来实现它。这是有效的，但我更喜欢一个解决方案，其中被点击的元素不需要修改所有其他元素，只需要自己。

这可能吗？使用JavaScript是可能的，应该支持IE9 +。

这是我当前解决方案的fiddle。

为什么我不想这样做？

不幸的是，这应该是响应性的，因此我不想操纵连续的所有元素（因为行可以随时更改）。

谢谢！我希望我能清楚自己要做什么？