Creating Dot Leaders for Restaurant Menu - html

Question

I'm trying to create a restaurant menu with dot leaders and I'm having trouble with this.
The format I'm looking for is the picture posted below.
Can someone please help me with this ?
HTML
<div class="dotted">
<ol>
<li>
<h2>Test</h2>
<p><span>Test 2</span><span class="price">$3.50(2) - $6.50(4)</span></p>
</li>
</ol>
</div>
CSS
p { margin: 0 0 -5px 0; }
li {
width: 100%;
position: relative;
margin-bottom: 1em;
border-bottom: 1px dotted #000;
list-style-type:none
}
span {
position: relative;
bottom: -1px;
padding: 0 1px;
background: #FFF;
}
span.price {
position: absolute;
right: 0; bottom: -6px;
}
Thanks in advance !

Answer 1

Wrap the first line of each group in a div that you make a flex container and use the following settings. The second line (ingredients) is outside of that container and can be a simple paragraph or DIV that has some bottom margin.
.linewrapper {
display: flex;
align-items: baseline;
}
.middle {
border-bottom: 1px dotted #aaa;
flex-grow: 1;
margin: 0 5px;
}
.ingredients {
color: #bbb;
margin-bottom: 1em;
}
<div class="linewrapper">
<div>
QUAIL
</div>
<div class="middle"></div>
<div>
9.9
</div>
</div>
<div class="ingredients">
stuff, stuff, stuff...
</div>
<div class="linewrapper">
<div>
SEA TROUT
</div>
<div class="middle"></div>
<div>
26.9
</div>
</div>
<div class="ingredients">
stuff, stuff, stuff...
</div>

Answer 2

Use a pseudo element with a dashed (or dotted or whatever) border to draw the dots and position it behind the text using z-index and give the text a background color so that the dots don't bleed through.
li {
display: flex;
justify-content: space-between;
position: relative;
align-items: baseline;
}
li:before {
border-bottom: 1px dashed #333;
content: '';
position: absolute;
bottom: 4px; left: 0; right: 0; top: 0;
z-index: -1;
}
span {
background: #fff;
padding: 0 .5em
}
<ul>
<li><span>Quail</span> <span>9.9</span></li>
<li><span>Quail</span> <span>9.9</span></li>
</ul>

Answer 3

body{
background: #fff;
}
.wrapper{
width:500px;
margin: 10px auto;
}
ul{
list-style:none;
padding: 0;
}
li{
width: 100%;
margin-bottom: 10px;
}
.line {
border-bottom: 1px dashed #000;
}
span{
float: right;
}
span, strong{
position:relative;
background: #fff;
z-index: 1;
top: 5px;
padding: 0 0 1px;
}
.description{
margin-top: 2px;
}
<div class="wrapper">
<ul>
<li><div class="line"><strong>My product</strong><span>Price</span></div><div class="description">My description</div></li>
<li><div class="line"><strong>My product</strong><span>Price</span></div><div class="description">My description</div></li>
<li><div class="line"><strong>My product</strong><span>Price</span></div><div class="description">My description</div></li>
</ul>
</div>