Как добиться одинаковой высоты блоков с одним индетификатором?

Question

[Aleksander911]

Доброго дня всем.
имеется вывод списка в две колонки с одинаковыми id и class:

<dt  class="one-height reg_1636">Текст</dt>
<dd class="one-height reg_1636">Описание текста</dd>
<dt class="one-height reg_1637">Текст2</dt>
<dd class="one-height reg_1637">Описание текста2</dd>
и тд.

Верстка сайта адаптированная и частями из-за длины текста в dd съезжают колонки.
При помощи jquery можно выровнять все колонки по высоте самой большой:

function setEqualHeight(columns)
				{
				var tallestcolumn = 0;
				columns.each(
				function()
				{
				currentHeight = $(this).height();
				if(currentHeight > tallestcolumn)
				{
				tallestcolumn = currentHeight;
				}
				}
				);
				columns.height(tallestcolumn);
				}
				$(document).ready(function() {
				
				setEqualHeight($(".one-height"));
			});

Но это не вариант, т.к. многие колонки имеют небольшой текст, а становятся огромными.
Подскажите как сделать так, чтобы высота ровнялась только по большей dt и dl с одинаковыми классами?

Comments

[Алекс Глебов]

display flex родителю и все

если нужен js то это гуглится
одинаковые колонки на js

[Aleksander911]

Алекс Глебов, где гуглится вариант, в котором классы изменяются?

[Aleksander911]

Алекс Глебов, колонки чередуются двумя цветами. Flex dt по высоте отличается от dd, и поэтому цвет не стыкуется

[Алексей Скляров]

Зачем так извращаться, когда можно использовать флекс?

[Aleksander911]

Алексей Скляров, можете показать вариант с flex, где чередуются колонки цветами и чтобы состыковывались цвета по высоте?

[Aleksander911]

Спасибо ребят! Флексом решил вопрос, просто забыл убрать align-items: flex-start; он dt не давал выровняться по высоте.

[y0u]

Aleksander911, напиши решение в ответ и отметь вопрос решенным!

[Aleksander911]

y0u, ок

Answer 1

[Aleksander911]

Решил вопрос без js, используя flex, понимая, что старые браузеры не потянут его. Сам код в натуральном его виде из комплексного компонента каталога Битрикс характеристик карточки товара:

<dl class="product-item-detail-properties">
<dt>Артикул</dt><dd>100172</dd>
<dt>Базовая единица</dt><dd>шт</dd>
...
</dl>

CSS:

.product-item-detail-properties {
    display: flex;
    flex-wrap: wrap;
}
.product-item-detail-properties dt {
    clear: both;
    flex: 0 0 50%;
    overflow: hidden;
    font-weight: bold;
    font-size: 13px;
    padding: 5px 0 5px 10px;
   border-bottom: 1px solid #e5e5e5;
}
.product-item-detail-properties dd {
    font-size: 13px;
    flex: 50% 0 0;
    padding: 7px 0;
    margin: 0;
    border-bottom: 1px solid #e5e5e5;
}
/*чередующийся цвет колонок*/
 .product-item-detail-properties dt:nth-child(4n+1),  .product-item-detail-properties dd:nth-child(4n+2) {
   background: #fbfbfb;
}

Answer 2

[Владимир]

Для начала НЕ ДОЛЖНО быть одинаковых id, так как он обязан быть уникальным

Comments

[Aleksander911]

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

[Aleksander911]

Подправил для ВАС)