Fill available spaces between labels with dots or hyphens

Question

I have a page with labels which are contained in a div, the labels has a variable with and i want to fill spaces between both with characters, dots or \'-\'.

For ex

Answer 1

I have implemented this on a table with pure CSS and even without using any span or div.

CSS is:

.dot-table td {
    max-width:200px;
    overflow:hidden;
    white-space:nowrap;
}
.dot-table td:first-child:after {
    content:" - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - "
}

HTML is

  

    

       Coffee
    
    

       45 INR
    
  
  

    

       Tea
    
    

       36 INR
    
   

A detailed output (from a site I developed)

View it live here.