JSFiddle - React, Tailwind, and code Playground

by Александр Парчагин

HTML

<div class="block">
    <div class="block__item">Crab Claw</div>
    <div class="block__item dotted"></div>
    <div class="block__item">$12.50</div>  
</div>

CSS

.block{
    display:table;
    width:100%;
    background:linear-gradient(to left,#008080, #fff);
    margin-top:50px;
    font-size:18px;
}
.block__item{
    display:table-cell;
    padding:5px 3px;
    white-space: nowrap;  
}
.block__item.dotted{
    padding-bottom:2px;
    width:100%;
}
.block__item.dotted:before{
    content:'';
    display:block;
    border-bottom:1px dotted #000;
}