Javascript 在多行上切换内容

我有多个框，在多个行上，在切换时，内容应该放在与单击框位于同一行的所有框下方的最左侧，而不仅仅放在单击框下方。这就是我所拥有的：

$（'.show'）。单击（函数（）{
$（this.parent（）.parent（）.find（'.content'）.slideToggle（）；
$（this）.parent（）.parent（）.sibbines（）.find（'.content'）.slideUp（'fast'）；
});
.site容器{
最大宽度：1200px；
}
.集装箱{
显示器：flex；
柔性包装：包装；
}
.盒子{
宽度：200px；
高度：100px；
边框：2倍纯红；
利润率：0.50px 20 px 0；
}
.盒式集装箱{
宽度：250px；
}
.内容{
宽度：1200px；
}

显示
Lorem ipsum dolor sit amet，献祭精英
显示
Lorem ipsum dolor sit amet，献祭精英
尝试将内容的位置更改为绝对位置。这将使元素在使用“上”、“左”、“右”、“下”和“页边距”属性定义时对齐

完成后，将left属性设置为0，使其显示在最左侧

.content{
宽度：1200px；
位置：绝对位置；
左：0；
}

请注意，您还需要为项目留出一些空间，因为绝对定位不会与任何元素交互，如果没有提供空间，它将溢出

我已经调整了.box的边距。增加了20像素的上边缘

.box{
宽度：200px；
高度：100px；
边框：2倍纯红；
保证金：20px 50px 20px 0；
}

查看演示：
嗨，tony，您是否会提供所需输出的屏幕截图？我不太明白“内容应该放在与单击框同一行的所有框的下面，而不仅仅是在单击框的最左边”不清楚您想要什么，您在切换内容时混淆了第二行的框？您好，我在说明中附加了一个指向屏幕截图的链接