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:
- Establish flex container.
- Align all elements vertically to baseline.
- Dots will consume all available space on the line. This will force the menu item and price to opposite ends of the container.
- 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>
