我有一个常见问题页面，使用引导手风琴标签。 问题是，我把它们各占一半，但现在当打开一个选项卡时，旁边的一个选项卡也会打开（没有它的内容）

示例:

这是我的HTML:

<div id="faqresult">
    <div class="col-md-12 animatedopen">
       <div class="vragen-wrapper">
         <div class="masonry-header">
          <h3 id="betalen">Betalen</h3>
         </div>
         <div class="masonry-vragen faqcontainer">
      
          <div class="card">
            <div class="card-header" id="heading1">
              <h5 class="mb-0">
                <button class=" collapsed FAQ-button" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
                  Welke betalingstermijn hanteren jullie?
                  <i class="fas fa-chevron-down"></i>
                </button>
              </h5>
            </div>
            <div id="collapse1" class="collapse " aria-labelledby="heading1" data-parent="#accordion">
              <div class="card-body">
                <p>Bij een eerste bestelling dient er vooruit betaald te worden, hierna is eventueel betaling mogelijk op factuur.</p>
              </div>
            </div>
          </div>
          
          <div class="card">
            <div class="card-header" id="heading2">
              <h5 class="mb-0">
                <button class=" collapsed FAQ-button" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
                  Op welke manieren kan ik betalen?
                  <i class="fas fa-chevron-down"></i>
                </button>
              </h5>
            </div>
            <div id="collapse2" class="collapse " aria-labelledby="heading2" data-parent="#accordion">
              <div class="card-body">
                <p>De eerste bestelling altijd vooraf, daarna eventueel betaling mogelijk op factuur. Bij een eerste bestelling of betaling vooraf wordt een inschatting gemaakt van de verzendkosten. Deze zullen op basis van nacalculatie nogmaals berekend worden. Voor het verschil in kosten kan eventueel nog een aanvullende factuur volgen.</p>
              </div>
            </div>
          </div>
          
          <div class="card">
            <div class="card-header" id="heading3">
              <h5 class="mb-0">
                <button class=" collapsed FAQ-button" data-toggle="collapse" data-target="#collapse3" aria-expanded="false" aria-controls="collapse3">
                  Wanneer ontvang ik mijn factuur?
                  <i class="fas fa-chevron-down"></i>
                </button>
              </h5>
            </div>
            <div id="collapse3" class="collapse " aria-labelledby="heading3" data-parent="#accordion">
              <div class="card-body">
                <p>De factuur ontvang je na levering</p>
              </div>
            </div>
          </div>
          
         </div>
       </div>
    </div>
</div>

为什么我打开的手风琴旁边的手风琴，高度也变了？ 也许跟我拆分他们的方式有关？

我应用这个CSS让它们50/50分成:

#faqresult{
  width:100%;
}

.faqcontainer{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.faqcontainer .card{
  flex: 0 0 49.5%;
}

答案后的结果如下:

工作良好:

但第二个没有: