Как правильно сверстать блок?

.card {
//    cursor: pointer;
//    overflow: hidden;
.card-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    margin-top: 15px;
    background:  rgba(255, 255, 255, 0.70);
    display: grid;
grid-template-columns: repeat(4, 1fr);
    align-items: center;
   justify-items: center;
    gap: 50px;
}
.card.active .card-content {
//    max-height: 100%; 
// }
// .card-box {
//    box-sizing: border-box; 
// }

Как правильно сверстать блок?

document.addEventListener('DOMContentLoaded', function () {
   const cards = document.querySelectorAll('.card');

   cards.forEach(card => {
      card.addEventListener('click', function () {
         cards.forEach(c => {
            if (c !== card) {
               c.classList.remove('active');
            }
         });
         card.classList.toggle('active');
      });
   });
});

вот код. Справляется, но теперь другая проблема.
Открывается только в ширину блока, как сделать открытие (ширина всего контейнера)?

Результат выпадающего списка?

Дмитрий, посмотрел видео. здорово!!! спасибо! Но, после выбора надо вывести таблицу. Если создам в бд 2 последних двигатель и данные таблицы связать два списка и вывести. так примерно?

Результат выпадающего списка?

реализовано через php. осталось вывести результаты при выборе. много читал ,но никак не пойму.

Результат выпадающего списка?

я не жду решение в три строчки. понимаю что кода будет много. Прошу направить как это можно реализовать. например если создам в бд 2 последних двигатель и данные таблицы связать два списка. правильно?

Результат выпадающего списка?

такой смысл

Результат выпадающего списка?

FanatPHP, как это можно реализовать?

Результат выпадающего списка?

<?php
$arParams = array(
'models' => array(
0 => 'Audi',
1 => 'Bentley',
2 => 'BMW',
3 => 'Mercedes-Benz',
4 => 'Porsche',
5 => 'SEAT',
6 => 'Skoda',
7 => 'Volkswagen',
),
'series' => array(
0 => array('value' => 'A1', 'parent' => 0),
1 => array('value' => 'A3', 'parent' => 0),
2 => array('value' => 'A4', 'parent' => 0),
3 => array('value' => 'A4 allroad', 'parent' => 0),
4 => array('value' => 'A5', 'parent' => 0),
5 => array('value' => 'A6', 'parent' => 0),
6 => array('value' => 'A6 allroad', 'parent' => 0),
7 => array('value' => 'A7', 'parent' => 0),
8 => array('value' => 'A8', 'parent' => 0),

'modif' => array(
0 => array('value' => 'A1 8X 2011 - ...', 'parent' => 0),
1 => array('value' => 'A3 8P 2009 - 2013', 'parent' => 1),
2 => array('value' => 'A3 8V 2013 - ...', 'parent' => 1),
3 => array('value' => 'A3 8V Sedan 2013 - ...', 'parent' => 1),
4 => array('value' => 'A4 B8 2008 - 2015', 'parent' => 2),
5 => array('value' => 'A4 B9 2015 - ...', 'parent' => 2),
6 => array('value' => 'A4 Allroad B8 2008 - 2015', 'parent' => 3),
7 => array('value' => 'A4 Allroad B9 2015 - ...', 'parent' => 3),
8 => array('value' => 'A5 8T 2008 - 2016', 'parent' => 4),
9 => array('value' => 'A5 B9 2016 - ...', 'parent' => 4),
10 => array('value' => 'A6 C6 2005 - 2011', 'parent' => 5),
11 => array('value' => 'A6 C7 2011 - 2018 ', 'parent' => 5),

'engine' => array(
0 => array('value' => '1.2 TFSI', 'parent' => 0),
1 => array('value' => '1.4 TFSI', 'parent' => 0),
2 => array('value' => '1.8 TFSI gen3', 'parent' => 0),
3 => array('value' => '1.6 TDI', 'parent' => 0),
4 => array('value' => '2.0 TDI', 'parent' => 0),
5 => array('value' => '1.2 TFSI', 'parent' => 1),
6 => array('value' => '1.4 TFSI', 'parent' => 1),