Css 引导式手风琴水平折叠

我的代码基于以下问题，但无法在修改后的版本中达到预期的结果：

正如你将在我的代码中看到的，我希望手风琴的一个面板水平打开/关闭，而另一个面板始终保持打开状态。我几乎明白了，但第二个（打开的）面板的文本仍然有问题：它应该使用页面宽度的所有剩余部分，但它没有，并且文本超出了底部的面板区域

你知道我该怎么做吗

请在此处查看我的代码：

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        <div class="panel-content">
          <ul>
            <li>Link#1</li>
            <li>Link#2</li>
            <li>Link#3</li>
            <li>Link#4</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
      <div class="panel-body">
      <div class="panel-content">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
      </div>
    </div>
  </div>

---

这里也一样：

试试下面的代码可能会对你有所帮助

html，正文{
背景色：#e9eaed；
}
.内容{
宽度：960px；
高度：0px；
右边距：自动；
左边距：自动；
}
.小组{
宽度：230px；
z指数：100；
-webkit背面可见性：隐藏；
-webkit变换：translateX（-100%）旋转（-90度）；
-webkit变换原点：右上方；
-moz变换：translateX（-100%）旋转（-90度）；
-moz变换原点：右上；
-o变换：translateX（-100%）旋转（-90度）；
-o变换原点：右上角；
变换：translateX（-100%）旋转（-90度）；
变换原点：右上角；
}
.小组标题{
宽度：230px；
}
.小组标题{
高度：18px
}
.小组标题a{
浮动：对；
文字装饰：无；
填充：10px 100px；
利润率：-10px-100px；
}
.小组委员会{
高度：430px；
}
.img小组{
-webkit背面可见性：隐藏；
-webkit变换：translateX（0%）旋转（90度）；
-webkit变换原点：左上；
-moz变换：translateX（0%）旋转（90度）；
-moz变换原点：左上；
-o变换：translateX（0%）旋转（90度）；
-o变换原点：左上；
变换：translateX（0%）旋转（90度）；
变换原点：左上；
}
.textRotate{
-webkit变换：旋转（90度）；
-moz变换：旋转（90度）；
-o变换：旋转（90度）；
-ms变换：旋转（90度）；
变换：旋转（90度）；
利润上限：80px！重要；
填充顶部：70px！重要；
宽度：350px！重要；
}
.面板组.面板img{
左边距：300px；
位置：绝对位置；
}

链接#1
链接#2
链接#3
链接#4

标题
一段文字，内容与网站相关，如果用户觉得有必要阅读，可以阅读。他们也可以跳过它，但这样可以使初始视图的文本量大大减少，请参见？
-一些源代码

这正是我想要的，谢谢。但是，当第一个面板打开时（假设只有200px），如何使它变小，而第二个面板则使其具有主体的其余宽度？是的，您可以通过.panel主体{height:200px；}控制其宽度

.panel-group {
    width:100%;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(-100%) rotate(-90deg);
    -webkit-transform-origin: right top;
    -moz-transform: translateX(-100%) rotate(-90deg);
    -moz-transform-origin: right top;
    -o-transform: translateX(-100%) rotate(-90deg);
    -o-transform-origin: right top;
    transform: translateX(-100%) rotate(-90deg);
    transform-origin: right top;
}
.panel-heading {
    width: 100%;
}
.panel-body {
    height:200px;
}
.panel-group .panel-content {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(0%) rotate(90deg);
    -webkit-transform-origin: left top;
    -moz-transform: translateX(0%) rotate(90deg);
    -moz-transform-origin: left top;
    -o-transform: translateX(0%) rotate(90deg);
    -o-transform-origin: left top;
    transform: translateX(0%) rotate(90deg);
    transform-origin: left top;
}
.panel-group .panel .panel-content {
    margin-left:520px;
    position: absolute;
}