FlexBox CSS и выравнивание

Question

Я изучаю Flex и вот мой шаблон:

<div id="container">
    <div>person1.name</div>
    <div>person1.address</div>
    <div>person1.phone</div>
    <div>person1.email</div>
    <div>person1.hobbies</div>
    <div>person2.name</div>
    <div>person2.address</div>
    <div>person2.phone</div>
    <div>person2.email</div>
    <div>person2.hobbies</div>
</div>

Я бы хотел что-то вроде этого (для моего рендеринга HTML): все, что специфично для person1, находится слева, а все, что специфично для person2, справа.

person1.name       person2.name
person1.address    personé.address
person1.phone      person2.phone
person1.email      person2.email
person1.hobbies    person2.hobbies

Есть идеи по использованию FlexBox?

Спасибо

Answer 1

Вот мой умозрительный ответ, если в нем более 2 человек, а поле, похожее на хобби, проходит за 1 строку.

#container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}


.person {
  flex: 0 1 300px;
}
.

<div id="container">
  <div class="person">
    <div>person1.name</div>
    <div>person1.address</div>
    <div>person1.phone</div>
    <div>person1.email</div>
    <div>person1.hobbies</div>
  </div>
  <div class="person">
    <div>person2.name</div>
    <div>person2.address</div>
    <div>person2.phone</div>
    <div>person2.email</div>
    <div>person2.hobbies soccer, collecting stamps, jogging, video games, tv, cooking, reading</div>
  </div>
  <div class="person">
    <div>person3.name</div>
    <div>person3.address</div>
    <div>person3.phone</div>
    <div>person3.email</div>
    <div>person3.hobbies</div>
  </div>
</div>

Answer 2

#container {
  display:  inline-flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100px;
}

#container > div {
  height: 20px;
  margin: 0 10px;
}

<div id="container">
  <div>person1.name</div>
  <div>person1.address</div>
  <div>person1.phone</div>
  <div>person1.email</div>
  <div>person1.hobbies</div>
  <div>person2.name</div>
  <div>person2.address</div>
  <div>person2.phone</div>
  <div>person2.email</div>
  <div>person2.hobbies</div>
</div>