Как сделать так, чтобы адаптивное видео встраивалось в ряд с другим div и оба имели одинаковую высоту?

Question

Я пытаюсь выровнять буксирные дивизии в одном ряду и заставить их обоих иметь одинаковую высоту.

Слева находится раздел карты материала, а справа - адаптивное вложение видео.

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

.embed-container {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
        max-width: 100%;
    }

    .embed-container iframe,
    .embed-container object,
    .embed-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

Что делает видео Div скрытым при включении его в гибкую коробку

Я пытался:

1. Включить их в гибкий ряд
2. Используемая строка таблицы / ячейка CSS

STACKBLITZ

Answer 1

Использовать угловой материал Sidenav

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

STACKBLITZ