Выровнять элемент внутри неупорядоченного списка

Question

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

Префиксы имеют неодинаковую длину, как мне все же добиться, чтобы сделал контейнер каждого префикса одинаковой длины, чтобы заголовки были выровнены (без определения ширины c)?

ul {
  width: 100%
  list-style-type: none;
  padding: 0;
  margin: 0
}

.prefix {
  text-align: right;
  display: flex;
  align-items: flex-end;
  margin-right: 2rem;
}

li {
    display: flex;
}

h1 {
  font-size: 10vw;
  margin: 0;
  line-height: 1;
}

p {
  font-size: 4vw;
  margin: 0;
  line-height: 1;
}

<ul>
  <li>
    <div class="prefix">
      <p>TESTETST</p>
    </div>
    <div class="text">
      <h1>ONE</h1>
    </div>
  </li>
  <li>
    <div class="prefix">
      <p>TEST</p>
    </div>
    <div class="text">
      <h1>TWO</h1>
    </div>
  </li>
  <li>
    <div class="prefix">
      <p>TESTES</p>
    </div>
    <div class="text">
      <h1>THREE</h1>
    </div>
  </li>
</ul>

Answer 1

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

ul {
  width: 100% list-style-type: none;
  display: table;
  padding: 0;
  margin: 0
}

.prefix {
  display: table-cell;
  margin-right: 2rem;
}

.text {
  display: table-cell;
}

li {
  display: table-row;
}

h1 {
  font-size: 10vw;
  margin: 0;
  line-height: 1;
}

p {
  font-size: 4vw;
  margin: 0;
  line-height: 1;
}

<ul>
  <li>
    <div class="prefix">
      <p>TESTETST</p>
    </div>
    <div class="text">
      <h1>ONE</h1>
    </div>
  </li>
  <li>
    <div class="prefix">
      <p>TEST</p>
    </div>
    <div class="text">
      <h1>TWO</h1>
    </div>
  </li>
  <li>
    <div class="prefix">
      <p>TESTES</p>
    </div>
    <div class="text">
      <h1>THREE</h1>
    </div>
  </li>
</ul>