При открытии гармошки bootstrap ближайшая к ней тоже меняет высоту

Question

У меня есть страница часто задаваемых вопросов, на которой используются bootstrap аккордеонных вкладок. Проблема в том, что я разделил их 50/50 рядом друг с другом, но теперь, когда открывается одна вкладка, также открывается следующая (без ее содержимого)

Пример:

This is my html:

 Бетален   Welke betalingstermijn hanteren jull ie?     Bij een eerste bestelling dient er vooruit betaald te wordden, hierna is eventueel betaling mogelijk op factuur.     Op welke manieren kan ik betalen?     De eerste bestelling altijd vooraf, daarna eventueel betaling mogelijk op factuur. Bij een eerste, рассказывающий о различных словах и общении с другими людьми, ван де verzendkosten. Deze zullen op base van nacalculat ie nogmaals berekend worden. Voor het verschil in kosten kan eventueel nog een aanvullende factuur volgen.     Wanneer ontvang ik mijn factuur?     De factuur ontvang je na leleing         

Почему аккордеоны рядом с тот, который я открываю, тоже меняется по высоте? Может быть, это как-то связано с тем, как я их разделил?

Я применил это CSS, чтобы они разделились 50/50:

#faqresult{
  width:100%;
}

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

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

Результат после ответа ниже:

Хорошо работает:

But the second one doesn't:

введите описание изображения здесь

Answer 1

align-items: flex-start; на вашем *.faqcontainer должно быть решением.

flex-start: край поля перекрестного старта элементов помещается на линию перекрестного старта

align-items имеет режим по умолчанию stretch:

stretch (по умолчанию): растягивание для заполнения контейнера (все еще соблюдая минимальную ширину / максимальную ширину)

ОБНОВЛЕНИЕ

Вы можете создать такую ​​структуру

.container
  .column_container
    .card
    .card
  .column_container
    .card
    .card

с css вот так

#faqresult{
  width:100%;
}

.faqcontainer{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  align-content: flex-start;
  flex-direction: row;
}
.faqcontainer .column_container{
  width: 49.5%;
}
.faqcontainer .column_container .card{
  width: 100%;
}