如何将圆圈与行中心对齐？

Question

我正在尝试将圆圈对齐到一行中心，但文本和紫色线条应该依次位于顶部/底部（参见Codepen）。

<ul class="mounting-phases">
<li class="mounting-phases__item">
    <div class="mounting-phases__circle mounting-phases__circle--1"></div>
    <div class="mounting-phases__dash"></div>
    <div class="mounting-phases__text">Спланировать участок в соответствии с исполнительной схемой</div>
</li>
<li class="mounting-phases__item">
    <div class="mounting-phases__circle mounting-phases__circle--2"></div>
    <div class="mounting-phases__dash"></div>
    <div class="mounting-phases__text">Нанести разметку для всех конструкций</div>
</li>
<li class="mounting-phases__item">
    <div class="mounting-phases__circle mounting-phases__circle--3"></div>
    <div class="mounting-phases__dash"></div>
    <div class="mounting-phases__text">Сделать отверстия для установки опорных столбов</div>
</li>
<li class="mounting-phases__item">
    <div class="mounting-phases__circle mounting-phases__circle--4"></div>
    <div class="mounting-phases__dash"></div>
    <div class="mounting-phases__text">Наживить перекладины с помощью хомутов на нужной высоте</div>
</li>
<li class="mounting-phases__item">
    <div class="mounting-phases__circle mounting-phases__circle--5"></div>
    <div class="mounting-phases__dash"></div>
    <div class="mounting-phases__text">Установить столбы согласно чертежам</div>
</li>
<li class="mounting-phases__item">
    <div class="mounting-phases__circle mounting-phases__circle--6"></div>
    <div class="mounting-phases__dash"></div>
    <div class="mounting-phases__text">Выставить трубы и перекладины строго по уровню</div>
</li>
<li class="mounting-phases__item">
    <div class="mounting-phases__circle mounting-phases__circle--7"></div>
    <div class="mounting-phases__dash"></div>
    <div class="mounting-phases__text">Зафиксировать перекладины, затянув болты в хомутах</div>
</li>
<li class="mounting-phases__item">
    <div class="mounting-phases__circle mounting-phases__circle--8"></div>
    <div class="mounting-phases__dash"></div>
    <div class="mounting-phases__text">Когда все выставлено в уровень и протянуто, залить бетон и еще раз проверить вертикали</div>
</li>
<li class="mounting-phases__item">
    <div class="mounting-phases__circle mounting-phases__circle--9"></div>
    <div class="mounting-phases__dash"></div>
    <div class="mounting-phases__text">Отмыть следы бетона со столбов в течение трех часов</div>
</li>
<li class="mounting-phases__item">
    <div class="mounting-phases__circle mounting-phases__circle--10"></div>
    <div class="mounting-phases__dash"></div>
    <div class="mounting-phases__text">Осуществить окончательную протяжку всех хомутов через 24 часа</div>
</li>