Как я могу сделать макет из 2 столбцов с flex в CSS?

Question

В настоящее время у меня есть гибкий макет с 2 столбцами.Но проблема в том, что мне нужно установить ширину левого столбца равной ширине левого столбца максимальной ширины, который существует.Как я могу это сделать?

p {
    display: flex;
    display: -ms-flexbox;
    line-height: 2;
    align-items: flex-start;
    position: relative;
}

<div>
  <p>
    <span>Test 1</span>
    <span>Content 1</span>
  </p>
  <p>
    <span>Test test test test test</span>
    <span>Content test test test</span>
  </p>
  <p>
    <span>Test test 2</span>
    <span>Content 1</span>
  </p>
  <p>
    <span>Test blub</span>
    <span>abc</span>
  </p>
</div>

Answer 1

Это макет таблицы CSS, а не макет flexbox:

.table {
  display: table;
}

.table p {
  display: table-row;
  line-height: 2;
}

.table p span {
  display: table-cell;
}

<div class="table">
  <p>
    <span>Test 1</span>
    <span>Content 1</span>
  </p>
  <p>
    <span>Test test test test test</span>
    <span>Content test test test</span>
  </p>
  <p>
    <span>Test test 2</span>
    <span>Content 1</span>
  </p>
  <p>
    <span>Test blub</span>
    <span>abc</span>
  </p>
</div>

Answer 2

В вашем HTML:

<div class="row">
    <div class="column"></div>
    <div class="column"></div>
</div>

И в вашем css:

.row {
    display: flex;
}

.column {
    flex: 50%;
}

Bootstrap (4) решил эту проблему, используя имена классов row и col.