Using Dot Leaders For A Food Menu With Flex *follow-up

This is a follow-up from: Using dot leaders for a food menu with bootstrap grids I'm creating a food menu using the grid column system with bootstrap 3, and I've created dot leader

Solution 1:

One way would be to use a pseudo element to draw the dots instead, wrap your text in an element that gives it a background color that matches the page background, and position the dots underneath that element with the background color.

.dots {
  display: flex;
  position: relative;
}

.dots span {
  background: white;
  padding: 0 15px 0 0;
}

.dots::after {
  white-space: nowrap;
  overflow: hidden;
  direction: rtl;
  content: "";
  border-bottom: 1px dotted black;
  position: absolute;
  bottom: 5px;
  left: 0; right: 0;
  z-index: -1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class=" col-xs-6 ">
      <p class="item dots"><span>Cheese</span></p>
      <p class="item dots"><span>White</span></p>
      <p class="item dots"><span>Special</span></p>
      <p class="item dots"><span>Whole Wheat</span></p>
      <p class="item dots"><span>Silician</span></p>
      <p class="item dots"><span>Silician Special</span></p>
      <p class="item dots"><span>Chicago Style</span></p>
    </div>
    <div class="col-xs-2">
      <p class="item">$8.99</p>
      <p class="item">$9.99</p>
      <p class="item">$13.50</p>
      <p class="item">$13.50</p>
      <p class="item">$13.50</p>
      <p class="item">$13.50</p>
      <p class="item">$13.50</p>
    </div>
    <div class="col-xs-2">
      <p class="item">$11.99</p>
      <p class="item">$12.99</p>
      <p class="item">$15.99</p>
      <p class="item">$12.99</p>
      <p class="item">$12.99</p>
      <p class="item">$12.99</p>
      <p class="item">$12.99</p>
    </div>
    <div class="col-xs-2">
      <p class="item">$12.99</p>
      <p class="item">$13.99</p>
      <p class="item">$17.99</p>
      <p class="item">$13.99</p>
      <p class="item">$15.99</p>
      <p class="item">$20.00</p>
      <p class="item">$14.99</p>
    </div>
  </div>
</div>