JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<ul>
    <li><a>Salmon Ravioli</a> <span>7.95</span></li>
    <li><a>Fried Calamari.</a> <span>8.95</span></li>
    <li><a>Almond Prawn Cocktail, with orange and potato salad, spring carrots, blue cheese, tuna, oh yes, and prawns</a> <span>7.95</span></li>
    <li><a>Bruschetta</a> <span>5.25</span></li>
    <li><a>Margherita Pizza</a> <span>10.95</span></li>
</ul>

CSS

ul {margin:0; padding:0; list-style:none; display:table; width:80%;}
li {display:table-row;}
a, span {display:table-cell; vertical-align:bottom; padding-bottom:10px;}
a {text-align:left;}
span {text-align:right;}

JavaScript

$("a").each(function(){
    var rowHeight = $(this).height();
    while ($(this).height() === rowHeight) {
        $(this).append(" .");
    }
    $(this).html($(this).html().slice(0,-2));
});