CSS - Высота карт, которая имеет несоответствие ⇐ Html

[Anonymous]

У меня есть эта следующая проблема: < /p>
Проблема связана со следующей ситуацией: я должен сопоставить карты с одинаковой высотой, но с поворотом: когда я расширяю одну, я также хочу не влиять на другие. Потерянный < /p>
Это мой код (я думаю, только соответствующие части): < /p>
function Features() {
const data = [some data, I won't paste it here]

return (


{data.map((feature, index) => (

))}


);
}
< /code>
Этот код сгенерирует некоторые элементы функционального ящика: < /p>
function FeatureBox({ title, description, canDo, cannotDo }) {
const [open, setOpen] = useState(false);

return (



{title}

{description}

setOpen((prev) => !prev)}
>
{open ? (

) : (

)}


{/* Can Do */}
{open && (




Ce poate să facă {title}:

• {canDo.map((item, index) => (
• 
  {item}
  
  ))}

{/* Cannot Do */}


Ce nu poate să facă {title}:

• {cannotDo.map((item, index) => (
• 
  {item}
  
  ))}

)}

);
}

export default FeatureBox;
< /code>
У меня есть проблема CSS..features-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: start;
gap: 2.4rem;

padding: 2.4rem 4.8rem;
margin: 0 auto;
}
< /code>
featurebox.css:
.feature-responsibilities-container {
display: grid;
grid-template-rows: auto auto;
gap: 2.4rem;
height: 100%;
}

.feature-box {
display: flex;
flex-direction: column;
background-color: #fafafa;
border-radius: 12px;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
< /code>
Как выглядят мои карты < /p>
Важное примечание.>

Подробнее здесь: https://stackoverflow.com/questions/797 ... -missmatch