Я пытаюсь создать макет с двумя столбцами, в котором в каждой строке отображается только два элемента. Что-то вроде того, что упоминалось здесь. Выровняйте дочерние элементы разных блоков, но у меня другая структура HTML, и это решение в моем случае не работает.
Вот структура моего HTML:
У меня возникает вопрос: учитывая такую структуру HTML, как мне использовать CSS Gird или Flexbox, чтобы убедиться, что каждый дочерний элемент в LeftColumn точно выровнен с каждым дочерним элементом в RightColumn в той же строке?
Сейчас проблема, с которой я сталкиваюсь, заключается в том, что иногда в зависимости от того, как долго находится контент в некоторых из этих дочерних элементов, выравнивание нарушается. Например, вот как это выглядит сейчас:

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

Я знаю, что если бы у меня не было элемента div LeftColumn или RightColumn, я мог бы легко использовать CSS-Grid или Flex Box для исправления выравнивания.
р>
Но предположим, что я не могу изменить этот HTML-код, могу ли я использовать CSS-Grid или Flex box или любой другой метод, чтобы установить связь между дочерним элементом в левом столбце и дочерним элементом в правом столбце, чтобы исправить выравнивание?
Мобильная версия