Я пытаюсь создать макет, в котором у вас есть три элемента в исходном состоянии: 
В элементе 3 будет таблица, в которой пользователи могут выбирать элементы, которые будет отображаться более подробно в пункте 2 с использованием панелей расширения пользовательского интерфейса материалов. Я бы хотел, чтобы пункт 3 был сужен до xs = 6, когда панели расширения открыты, чтобы он выглядел так: 
В настоящее время я использую Система сетки из material-ui для создания этого макета, а при использовании контейнера basi c с 3 элементами высота элемента 1 остается равной высоте элемента 2 при его расширении. Это приводит к тому, что весь элемент 3 также перемещается вниз и создает разрыв между элементами 1 и 3.
Одна вещь, которую мне удалось заставить работать, - это преобразовать xs = 12 в элементе 3 в xs = 6. используя событие щелчка из таблицы, но я бы предпочел, чтобы это происходило только тогда, когда элемент 2 становится слишком большим, и я также не уверен, что это хорошая практика.
Я надеюсь, что кто-то может высказать свое мнение о как решить эту проблему, как лучше всего подойти к этому вопросу. Заранее спасибо!