Align 3 columns, middle column HR adjustable - html

Question

i have this section:
What I'm trying to achieve, is to have the left span, with a padding on the right, then on the middle the HR, and on the right the span with the price, but I want to have the price align to the right, and make the HR adjustable, so it always ends on the price and starts after the first span. I'm not being able to achieve this, no matter what I try.
Here is the code:
<div class="ementaspan"><span class="span1"><h5 class="font-150690 h5 font-weight-600 text-color-118181-color" style="
display: inline-block;
"><span>Creme de Baunilha</span></h5></span> <span><hr class="dotted border-accent-color separator-no-padding" style="width: 90%;border-top-width: 4px;"></span><span class="span3"><h5 class="font-150690 h5 font-weight-300"><span>1,60€</span></h5></span></div>
Creme de Nata 1,60€
And the CSS:
.ementaspan span h5, .ementaspan hr {
display: inline-block !important;
}
.ementaspan {
text-align: left !important;
}
.ementaspan .span1 {
width: 25% !important;
}
.ementaspan .span1 h5 {
padding-right: 25px;
}
.ementaspan hr {
width: 50% !important;
}
.ementaspan .span3 {
width: 25% !important;
}
.ementaspan .span3 h5 {
padding-left: 25px;
}

Answer 1

the easiest way is to do it with flex
.maindiv {
display: flex;
width: 100%;
justify-content: space-between;
align-items: flex-end;
}
.maindiv .div1 {
padding-right: 20px;
}
.maindiv .div2 {
flex: 1 1 auto;
}
.maindiv .div2 hr {
height: 0;
background: none;
color: transparent;
border-bottom: 3px dotted #f00;
border-top: none !important;
margin: 0 0 4px !important;
}
.maindiv .div3 {
padding-left: 20px;
color: #f00;
}
<div class="maindiv">
<div class="div1">Creme de Baunilha</div>
<div class="div2"><hr></div>
<div class="div3">1,60€</div>
</div>
<div class="maindiv">
<div class="div1">Creme de Nata</div>
<div class="div2"><hr></div>
<div class="div3">11,60€</div>
</div>
<div class="maindiv">
<div class="div1">Baunilha e Noz</div>
<div class="div2"><hr></div>
<div class="div3">1,60€</div>
</div>
<div class="maindiv">
<div class="div1">Baunilha e Cookies</div>
<div class="div2"><hr></div>
<div class="div3">121,60€</div>
</div>

Answer 2

Playing a little with your code,
I ended up with this:
.ementaspan {
display: flex;
width: 100%;
text-align: left !important;
}
.ementaspan span h5 {
display: inline-block !important;
}
.ementaspan .span2 {
flex: auto;
padding: 20px; /* Instead of padding on span1 and span3 */
}
.ementaspan hr {
background: none;
color: transparent;
border: 0; /* Resets hr style */
border-bottom: 4px dotted #f00;
}
.ementaspan .span3 {
width: 25% !important;
color: #f00;
}
<div class="ementaspan">
<span class="span1">
<h5 class="font-150690 h5 font-weight-600 text-color-118181-color" style="
display: inline-block;
"><span>Creme de Baunilha</span></h5>
</span>
<span class="span2">
<hr class="dotted border-accent-color separator-no-padding">
</span>
<span class="span3">
<h5 class="font-150690 h5 font-weight-300"><span>1,60€</span></h5>
</span>
</div>
<div class="ementaspan">
<span class="span1">
<h5 class="font-150690 h5 font-weight-600 text-color-118181-color" style="
display: inline-block;
"><span>Creme de Nata</span></h5>
</span>
<span class="span2">
<hr class="dotted border-accent-color separator-no-padding">
</span>
<span class="span3">
<h5 class="font-150690 h5 font-weight-300"><span>2,60€</span></h5>
</span>
</div>
<div class="ementaspan">
<span class="span1">
<h5 class="font-150690 h5 font-weight-600 text-color-118181-color" style="
display: inline-block;
"><span>Baunilha e Noz</span></h5>
</span>
<span class="span2">
<hr class="dotted border-accent-color separator-no-padding">
</span>
<span class="span3">
<h5 class="font-150690 h5 font-weight-300"><span>10,60€</span></h5>
</span>
</div>
Note that I kept all your classes and your html structure.
The only HTML modification is the span2 class,
then you'll only need to copy/paste the CSS to try it!
I hope it helps.