Как установить одинаковую высоту для строк через JS или jQuery?

Question

[krispeyJAk]

Есть вёрстка:

<div class="d-flex">
          <ul class="circles-table">
               <li class="gray-title">Смерть НС<sup class="number-prompt">1</sup></li>
              <li class="gray-title">Инвалидность НС 1,2,3 группы</li>
              <li class="gray-title">Травма (вкл.  любительский спорт 1 кат.)</li>
           </ul>
          <ul class="circles-table">
              <li>100% СС<sup class="number-prompt">2</sup></li>
              <li>1 гр. – 100% СС, 2 гр. – 75% СС, 3 гр. – 50% СС</li>
              <li>В соответствии с таблицей выплат</li>
          </ul>
</div>

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


Должно вот так:

Answer 1

[FeST1VaL]

Или таблица, Grid, Flex поочередно вставленных элементов в один ul с flex-wrap

<div class="d-flex">
          <ul class="circles-table">
              <li class="gray-title">Смерть НС<sup class="number-prompt">1</sup></li>
              <li>100% СС<sup class="number-prompt">2</sup></li>
              <li class="gray-title">Инвалидность НС 1,2,3 группы</li>
              <li>1 гр. – 100% СС, 2 гр. – 75% СС, 3 гр. – 50% СС</li>
              <li class="gray-title">Травма (вкл.  любительский спорт 1 кат.)</li>
              <li>В соответствии с таблицей выплат</li>
           </ul>
</div>

.circles-table {
    display: flex;
    flex-wrap: wrap;
    width: 370px;
}

.circles-table li {
    width: calc(50% - 32px);
    margin-right: 32px;
    margin-bottom: 16px;
}

Answer 2

[zkrvndm]

Вы изначально неправильно подошли к проблеме. Используйте таблицу!

Comments

[sinneren]

или гриды

[zkrvndm]

sinneren, а там можно табличные сетки делать? Мне как-то ни разу в жизни не доводилось использовать гриды, всегда хватало флексов и обычных таблиц, тем более что таблицы вполне можно адаптировать при помощи CSS и медиа запросов так, чтобы и на мобилах все было норм.

Вот так можно адаптировать таблицы под смартфоны на чистом CSS: