CSS：修复内容con列

Question

我正在使用 columns css属性为faq类型页面创建两列。单击常见问题解答时，在该页面上，答案会展开/折叠。此代码的行为与我正在使用的完全相同。代码如下：

    function toggleFAQ(_Target) {
      if(document.getElementById(_Target).className == "faq-hidden")
        document.getElementById(_Target).className = "";
      else
        document.getElementById(_Target).className = "faq-hidden";
    }

 .faq-columns {
      -webkit-columns: 2 400px;
      -moz-columns: 2 400px;
      columns: 2 400px;
    }
    .faq-wrapper {
      -webkit-column-break-inside: avoid; /* Chrome, Safari */
      page-break-inside: avoid;           /* Theoretically FF 20+ */
      break-inside: avoid-column;         /* IE 11 */
      display:table;                      /* Actually FF 20+ */
    }
    .faq-hidden {
      display: none;
    }

   <h3>FAQ Topic</h3>
    <p>Description of this topic.</p>
    
    <div class="faq-columns">
      <div class="faq-wrapper">
        <h4 onclick="toggleFAQ('faq1')">FAQ One</h4>
        <p id="faq1" class="faq-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div class="faq-wrapper">
        <h4 onclick="toggleFAQ('faq2')">FAQ Two</h4>
        <p id="faq2" class="faq-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div class="faq-wrapper">
        <h4 onclick="toggleFAQ('faq3')">FAQ Three</h4>
        <p id="faq3" class="faq-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div class="faq-wrapper">
        <h4 onclick="toggleFAQ('faq4')">FAQ Four</h4>
        <p id="faq4" class="faq-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div class="faq-wrapper">
        <h4 onclick="toggleFAQ('faq5')">FAQ Five</h4>
        <p id="faq5" class="faq-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div class="faq-wrapper">
        <h4 onclick="toggleFAQ('faq6')">FAQ Six</h4>
        <p id="faq6" class="faq-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div class="faq-wrapper">
        <h4 onclick="toggleFAQ('faq7')">FAQ Seven</h4>
        <p id="faq7" class="faq-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div class="faq-wrapper">
        <h4 onclick="toggleFAQ('faq8')">FAQ Eight</h4>
        <p id="faq8" class="faq-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>

所以，关于这个问题。如您所见，如果单击某列，由于新高度，其中的元素将流向另一列。我想阻止此发生，并且无论高度如何，每列的内容都会与该列保持一致。

我已经搜索过这个但无法找到有同样问题的人。

事先非常感谢！