Fiill the space between two text elements with dots [duplicate]

Question

I'm trying to figure out how to automatically fill space between two objects. I have menu items and prices.

The goal is something like this:

Burger..........................$9.99
Steak and Potato.........$14.99
Mac and Cheese.........$6.99

The spacing between menu item and price should be the same. Users can enter the menu item and price and I need to fill in any space.

This is what I've tried but it doesn't quite work:

.inLine {
  display: inline-block;
}

 <h1 class='inLine menuItem'> Burger </h1> 
<span class='inLine dots'> .....................</span>
<h3 class='inLine price'>  $9.99 </h3> 
<br>
<h1 class='inLine menuItem'> Steak </h1> 
<span class='inLine dots'> .....................</span>
<h3 class='inLine price'>  $14.99 </h3>

<h1 class='inLine menuItem'> Mediterranean Chopped Salad </h1> 
<span class='inLine dots'> .....................</span>
<h3 class='inLine price'>  $14.99 </h3>

The issue is the dots need to take up the correct amount of space regardless of how long the item name is. I've tried setting the dots to width: 100% but that does not seem to do it. Any ideas?

Answer 1

section {
  display: flex;                     /* 1 */
  align-items: baseline;             /* 2 */
  margin-bottom: 10px;
}
section > * {
  padding: 0;
  margin: 0;
}
span {
  flex: 1;                          /* 3 */
  overflow: hidden;                 /* 4 */
}

<section>
  <h1> Burger </h1>
  <span>..............................................................................................................................................................</span>
  <h3>  $9.99 </h3>
</section>
<section>
  <h1> Steak </h1>
  <span> ..............................................................................................................................................................</span>
  <h3>  $14.99 </h3>
</section>
<section>
  <h1> Mediterranean Chopped Salad </h1>
  <span> ..............................................................................................................................................................</span>
  <h3>  $14.99 </h3>
</section>

Notes:

1. Establish flex container.
2. Align all elements vertically to baseline.
3. Dots will consume all available space on the line. This will force the menu item and price to opposite ends of the container.
4. Any extra dots are clipped off-screen.

You can easily control the distance between the menu items and the price by adjusting the width of the container. In the example above, the width is set to 100% (the default for block-level elements).

Of course, having so many dots in your span elements is quite ugly. But this is a basic example. You could try using a pseudo-element or scripting a loop instead.

OR, you could try using a dashed or dotted border.

section {
  display: flex;
  align-items: baseline;
  margin-bottom: 10px;
}
section > * {
  padding: 0;
  margin: 0;
}
span {
  flex: 1;
  border-bottom: 2px dotted #333;

<section>
  <h1> Burger </h1>
  <span></span>
  <h3>  $9.99 </h3>
</section>
<section>
  <h1> Steak </h1>
  <span></span>
  <h3>  $14.99 </h3>
</section>
<section>
  <h1> Mediterranean Chopped Salad </h1>
  <span></span>
  <h3>  $14.99 </h3>
</section>