Сделайте два divs в разных столбцах одинаковой высоты в зависимости от содержимого

Question

У меня есть два столбца Foundation, которые имеют два div, и каждый div имеет текст внутри. Оба текста не имеют одинаковую длину, поэтому, дивы не всегда одинаковы по высоте (в зависимости от запроса СМИ)

<div class="row"> 
    <div class="medium-10 columns"> 
    <p>Some text here</p> 
    </div> 

    <div class="medium-10 columns> 
    <p>A lot more text in here</p> 
    </div> 
</div> 

, что я хочу сделать, это, что обе дивы всегда одинаковы height (в соответствии с div с большинством текста в нем). Также я хочу сосредоточить текст в div, который меньше текста. Я всегда делал это с помощью Flexbox. Но он падает из-за схемы сетки Foundation. Есть идеи?

Только CSS!

Answer 1

С док основания:

Вы можете создать равную высоте контейнера с помощью нескольких атрибутов данных. Применить атрибут эквалайзера данных к родительскому контейнеру. Затем примените атрибут-эквалайзер-эквалайзер для каждого элемента, который должен быть равен равной высоте. Высота атрибута-эквалайзера данных будет равна , равной высоте самого высокого элемента.

<div class="row" data-equalizer> 
    <div class="large-6 columns panel" data-equalizer-watch> 
    ... 
    </div> 
    <div class="large-6 columns panel" data-equalizer-watch> 
    ... 
    </div> 
</div> 

Foundation Doc

Answer 2

Вы всегда можете использовать дисплей: таблица на классе .row, и дисплей: настольный ячейки на столбцах. Ячейка таблицы заставит два divs быть одинаковой высоты, независимо от содержимого.