Чередование левого-правого списка определений

Question

У меня есть простой список определений в следующем формате:

    dl {
    margin: 0;
}

dl.interview dt {
    color: #A8A67A;
}

dl.interview dd {
    margin-left: 0;
}

.interview dt:before {
  content: 'Q. ';
}
.interview dd:before {
  content: 'A. ';
}

dt {
    margin-top: 1em
}

dd {
  font-style: italic;
    padding: 0;
}

как получить каждую последующую пару вопросов и ответов для чередования между левым и правым?

Answer 1

Я бы использовал nth-of-type селектор. Я скорректировал поле на вашем dl.interview dt и добавил к верху поле 0 (dl, dl dt, dl dd).

Надеюсь, это поможет

dl, dl dt, dl dd {
  margin: 0;
}

dl.interview dt {
  color: #A8A67A;
}

dl.interview dd {
  /*margin-left: 0;*/
}

.interview dt:before {
  content: 'Q. ';
}

.interview dd:before {
  content: 'A. ';
}

dt {
  margin-top: 1em
}

dd {
  font-style: italic;
  padding: 0;
}

dd:nth-of-type(even){margin-left:65%;}
dt:nth-of-type(even){margin-left:65%;}

<dl class="interview">
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

Answer 2

надеюсь, я понял ваш вопрос. В моем примере я добавил

dt, dd {
    margin-top: 1em;
    float: left;
    width: 50%;
}

и удалено

dd {
    margin-top: 1em;
}

как я полагаю, Q и A должны начинаться на одной высоте.

Посмотрите здесь: https://codepen.io/anon/pen/gJaqKW

Это также можно решить с помощью flex или grid. Просто хотел начать легко;)

Надеюсь, это поможет.