3 divs, middle div needs to be a variable length dotted line - css

Question

I would like to create a restaurant style menu card.
I do not want to use tables. I'm trying to accomplish this using DIVs only.
This is what I have:
.review-row { // (1)
padding: 0;
}
.review-cat { // (2)
font-size: 25px;
float: left;
}
.review-dots { // (3)
padding-bottom: 5px;
float: left;
}
.review-dots-inner { // (3)
height: 5px;
border-bottom: 3px dotted #E65540;
}
.review-rating { // (4)
float: right;
font-size: 50px;
}
In the image think of (3) as being 2 DIVS, the inner div is there to get the dots on the same baseline as the text.
Now this doesn't work. How to proceed?
All DIVs should adjust width according to content
Middle DIV needs to act as a 'filler'

Answer 1

You don't need images..
See working example here..
do the following..
<!--Markup and styles-->
<div class="item-container">
<span class="item">Quality</span>
<span class="fill"></span>
<span class="score">8.0</span>
</div>
<div class="item-container">
<span class="item">Presentation</span>
<span class="fill"></span>
<span class="score">9.5</span>
</div>
<style>
.item-container{
width:200px;
/*border:1px solid #AAA;*/
display:block;
padding:5px;
margin:2px;
}
.item{
float:left;
margin:2px;
}
.score{
float:right;
margin:2px;
}
.fill{
border:none;
border-bottom:1px dotted #000;
display:inline-block;
}
</style>
And do this in your $().ready()
$('.item-container').each(function(){
//alert($('.fill', $(this)).width());
var item = $('.item', $(this));
var score = $('.score', $(this));
var itemWidth = item.width();
var scoreWidth = score.width();
var offset1 = item.offset().left;
var offset2 = score.offset().left;
var fillerWidth = (offset2 - offset1) - (itemWidth + scoreWidth);
$('.fill', $(this)).css('width', fillerWidth + 10);
});

Answer 2

Easy with Flexbox :) . See working example here..
<div class="row">
<div class="text-box">Breakfast</div>
<div class="dots-box"></div>
<div class="text-box">8:30 am - 9:30 am</div>
</div>
CSS
.row{
display: flex;
overflow:hidden;
padding:15px;
width:90%;
}
.text-box{
flex: 0 0 auto;
}
.dots-box{
flex: 1 1 auto;
position: relative;
}
.dots-box:before{
position:absolute;
bottom: 5px;
width: 94%;
border-bottom: 1px dotted #000;
content: '';
left: 3%;
}

Answer 3

You could set the dots as a repeating background, then add a white (or whatever) background for .review-cat and .review-rating.
This way you can then continue as you are going, float the rating to the right, make sure it is first in the html before (2) which is floated to the left.
background-color: white; is what you'll need to do
and for the .review-row you'll want to add the dots in as a repeating background
background: transparent url(../images/dots.png) repeat 0 0;
Good luck