Как поставить точки между колоннами grid?

Question

[date_step_end]

Избитый вопрос, не нашел подходящего решения, нужно проставить точки как на картинке



Но, значения правого столбца должны ровняться по левому краю. На ум приходит только grid, нужен любой рабочий вариант)

<div class="characteristic">
         <span class="option">св-во</span>
         <span>длинное значение</span>
         <span class="option">св-во</span>
         <span>значение</span>
</div>

<style>
.characteristic {
        display: grid;
        grid-template-columns: 1fr auto;
        justify-content: space-between;
    }
</style>

Comments

[Максим]

А просто два span внутри параграфа и сделать их flex justify-content: space-between а параграфу нижнию границу из точек то есть border-bottom 1px dotted #000, так незя?

Или три спан так же флексом но среднему нижнюю границу сделать

[Сергей Сергей]

Как реализовать табуляцию на CSS?

[Александр]

Стилизация линии как на макете, как?

[date_step_end]

Максим, так правый столбец не выведем по левому краю

[Максим]

date_step_end,

Answer 1

[imko]

Ну так в левую колонку кинь просто флекс с растущим элементом с точками
https://codepen.io/herr-imko/pen/bGPVLKV

Answer 2

[DIVSIDE]

Comments

[date_step_end]

не подходит, нужно выровнять правый столбец по левому краю, как на втором скрине

[DIVSIDE]

date_step_end, в чем проблема сделать .right width: 100%; ?