Как анимировать гибкие элементы, которые могут динамически увеличиваться в размерах, в React ⇐ CSS

[Anonymous]

У меня есть набор панелей — когда выбирается одна из панелей, следующая разворачивается, я попытался воссоздать здесь простую версию

Когда я нажимаю на одну из панелей, мне нужна новая панель, которая создается для увеличения ширины до большего размера по сравнению с другими панелями, которые должны оставаться меньшего фиксированного размера.

Существует определенное количество панелей (в примере 4), и на экран следует добавить больше, но должно отображаться не менее 4.

При нажатии на одну из меньших панелей новая панель должна исчезнуть из поля зрения, а выбранный элемент должен вырасти до большего размера.

Я пробовал сделать это с помощью flex и flexBasis/flexGrow, но не смог добиться описанного выше поведения. Буду признателен за любую помощь в том, как лучше подойти к этой проблеме.

Подводя итог, хочу, чтобы новые панели в основном расширялись от 0 до размера, а не появлялись и расширялись, когда они исчезают, я хочу, чтобы они сжимались до 0 от большего значения