Leader Dots

Just CSS

HTML

<div class="main">
  <div class="container">
    <div class="row">
      <span>Salmon Ravioli</span><span class="dots"></span><span>7.95</span>
    </div>
    <div class="row">
      <span>Salmon Ravioli</span><span class="dots"></span><span>7.95</span>
    </div>
  </div>
</div>

CSS

.main {
  width: 320px;
  background-color: red;
}

.container {
  background-color: pink;
}

.row {
  background-color: lightblue;
  display: flex;
}

.dots::before {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  content: 
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
 }
 
 .row span:first-child,
 .row span:last-child {
   flex-grow: 0;
   flex-shrink: 0;
   align-self: flex-start;
   background-color: purple;
 }