Как я могу отображать каждую пару `dt` и `dd` в одном столбце с помощью CSS Grid без изменения структуры HTML? ⇐ CSS

[Anonymous]

У меня есть следующий HTML-код, и я хочу, чтобы каждая пара элементов dt и dd отображалась в одном столбце, в результате чего в каждой строке будет два столбца. Однако при использовании CSS Grid каждый dt и dd рассматривается как отдельные столбцы.
Вот HTML:

Код: Выделить всё

/* First attempt */
dl {
display:grid;
grid-template-areas: "
mm bb
";
grid-template-columns: 1fr 1fr;
}

dt, dd {grid-area: bb;}
dt:nth-of-type(2n) {
background:red;
grid-area: mm;
}

dt:nth-of-type(2n) + dd {
background:red;   grid-area: mm;
}

/*dt:has(+ dd):nth-child(even), dt + dd {
border:1px solid blue;
}*/

Код: Выделить всё

Term 1
Definition 1
Term 2
Definition 2
Term 3
Definition 3
Term 4
Definition 4

Моя цель — добиться такого макета:

Код: Выделить всё

Term 1: Definition 1        | Term 2: Definition 2
Term 3: Definition 3        | Term 4: Definition 4

Я не могу изменить структуру HTML. Я попробовал следующий CSS, но он не сработал так, как ожидалось.
А вот еще одна попытка, которая ближе к тому, что я хочу, но все же неверна:

Код: Выделить всё

dl {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}

dt, dd {
margin: 0;
}

dt:nth-of-type(odd),
dd:nth-of-type(odd) {
grid-column: 1;
}

dt:nth-of-type(even),
dd:nth-of-type(even) {
grid-column: 2;
}

dt {
font-weight: bold;
}

dd {
/*            margin-left: 20px;*/
}

Что я делаю не так и как это исправить, чтобы получить желаемый макет с каждой парой dt и dd в одном столбце?
Пример CodePen:
https://codepen.io/amit-cohen-the-selec ... itors=1100


Подробнее здесь: https://stackoverflow.com/questions/785 ... -grid-with