section {
display: flex; /* 1 */
align-items: baseline; /* 2 */
margin-bottom: 10px;
}
section > * {
padding: 0;
margin: 0;
}
span {
flex: 1; /* 3 */
overflow: hidden; /* 4 */
}
Burger
..............................................................................................................................................................
$9.99
Steak
..............................................................................................................................................................
$14.99
Mediterranean Chopped Salad
..............................................................................................................................................................
$14.99
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;
Mediterranean Chopped Salad
$14.99
