JSFiddle - React, Tailwind, and code Playground

HTML

<div class="article">
    <span class="item">sandwichtoaster</span>
    <span class="dots"></span>
    <span class="price">$35</span>
</div>

CSS

.article
{
    display: flex;
}
.article .item,
.article .price
{
    flex: 1 0 auto;
}

.article .dots
{
    flex: 0 1 auto;
}

.dots::before
{
    display: block;
    white-space: nowrap;
    overflow: hidden;  
    text-overflow: clip;
    content:
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
}