Как растянуть линию от отного блока до другого?

Question

[Patris546]

Необходимо провести линию от блока с текстом к цене, пробую реализовать через спан, но в таком случае нужно будет для каждого элемента его стилизовать под определенные размеры, так как ширина каждой линии разная. Есть ли возможность сделать подстраивающуюся линию? Или может лучше через псевдоэлемент это сделать, но в таком случае опять непонятно, как сделать одну подстраивающуюся линию для всех элементов.

вот как должно быть:

<li class="menu__item">
                            <img src="../../img/pictures/menu/dish1.png" alt="" class="menu__item-img">
                            <div class="menu__item-desc">
                                <h4 class="menu__item-title">Raw Scallops from Erquy</h4>
                                <div class="menu__item-wrap">
                                    <p class="menu__item-text">Shuck the scallop to that used for oysters</p>
                                    <span class="menu__item-line"></span>
                                    <p class="menu__item-price">$40</p>
                                </div>
                            </div>
                        </li>

.menu{
    &__item{
        display: flex;
        align-items: center;
    }
    &__item-wrap{
        display: flex;
    }
    &__item-line{
        border-bottom: 1px solid #000000;
        width: 259px;
    }
}

Answer 1

[Patris546]

Вопрос решен: menu__item-desc была задана ширина 100%, а линии распределились по ширине при помощи свойства flex-grow: 1.