JSFiddle - React, Tailwind, and code Playground

HTML

<div class="faq_container">
    <div class="wrapper">
        <div class="question">
            <h3>Question 1</h3>
            <p>The question</p>
        </div>
        <div class="answer">
            <h3>Answer 1</h3>
            <p>The answer</p>
        </div>
    </div>
        <div class="wrapper">
        <div class="question">
            <h3>Question 1</h3>
            <p>The question</p>
        </div>
        <div class="answer">
            <h3>Answer 1</h3>
            <p>The answer</p>
        </div>
    </div>
        <div class="wrapper">
        <div class="question">
            <h3>Question 1</h3>
            <p>The question</p>
        </div>
        <div class="answer">
            <h3>Answer 1</h3>
            <p>The answer</p>
        </div>
    </div>
        <div class="wrapper">
        <div class="question">
            <h3>Question 1</h3>
            <p>The question</p>
        </div>
        <div class="answer">
            <h3>Answer 1</h3>
            <p>The answer</p>
        </div>
    </div>
        <div class="wrapper">
        <div class="question">
            <h3>Question 1</h3>
            <p>The question</p>
        </div>
        <div class="answer">
            <h3>Answer 1</h3>
            <p>The answer</p>
        </div>
    </div>
        <div class="wrapper">
        <div class="question">
            <h3>Question 1</h3>
            <p>The question</p>
        </div>
        <div class="answer">
            <h3>Answer 1</h3>
            <p>The answer</p>
        </div>
    </div>
</div>

CSS

* {box-sizing: border-box;}

.faq_container {
    width: 90%;
    margin: 20px auto;
    border: 1px solid #ccc;
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    
    column-gap: 0;
    -moz-column-gap: 0;
    -webkit-column-gap: 0;
}

.faq_container.active {
        column-count: 1;
    -moz-column-count: 1;
    -webkit-column-count: 1;
}

.faq_container > .wrapper {
    padding: 0.8em;
    border: 1px solid #ddd;
    cursor: pointer;
}
.answer {display: none;}

JavaScript

$(".wrapper").click(function(){
    $(this).children(".answer").toggle();
    $(".wrapper").not(this).toggle();
    $(".faq_container").toggleClass("active");
});