JSFiddle - React, Tailwind, and code Playground

HTML

<div class='item_wrapper'>
    <p class='item_name'>Marinated olives</p>
    <p class='item_price'>4,00€</p>
    <div class='dotted_line'></div>
</div>

CSS

.item_wrapper{
    width:100%;
}
.dotted_line{
    border-top:dotted 2px orange;
    position:absolute;
    width:90%;
    top:33px;
    z-index:-1;
}
p{
    position:relative;
    background:white;
    padding:0px 10px;
}
.item_name{
    float:left;
}
.item_price{
    float:right;
}