Pfthb

I have a FAQ section and i designed as two columns with 3 divs on the same column.(i'm using flex, but i say column to understand better)

Every div from the two columns it's acts like a collapse button to show the response of the question underneath the question.

I looked for similar questions, but nothing seems to be like this problem.

Exemple:

Row 1: question A, question B

Row 2: question C, question D

Row 3: question E, question F

The problem: when i click on question A, the whole Row 1 collapse showing the question A response and leaving a blank space underneath the question B.

How can i push what's underneath Question A instead of collapsing the Row 1?

My HTML:

 <div id="questions-container">
 @foreach($questions as $question)
 <div class="question-container">
 <div data-toggle="collapse" data-target="#answerCollapse-$question->id" aria-expanded="false"
 aria-controls="collapseExample">
 $question->question
 </div>
 <div class="collapse" id="answerCollapse-$question->id">
 <div class="card card-body">
 $question->answer
 </div>
 </div>
 </div>
 @endforeach
 </div>

CSS:

#questions-container 
 width: 60%;
 margin: 0 auto;
 display: flex;
 flex-wrap: wrap;
 flex-direction: row;
 justify-content: space-between;


.question-container 
 flex-basis: 45%;
 padding: 10px;
 margin-bottom: 15px;
 background-color: #d5d1d1;
 border-radius: 5px;


.question-container:hover 
 background-color: #ffffff;
 -webkit-transition: 1s;
 cursor: pointer;