JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu-row">
  <div class="food-item">Steak</div>
  <div class="dot-filler">............................................................................................</div>
  <div class="price">$18.00</div>
</div>

<div class="menu-row">
  <div class="food-item">Hamburger</div>
  <div class="dot-filler">............................................................................................</div>
  <div class="price">$8.00</div>
</div>

<div class="menu-row">
  <div class="food-item">Really long menu item name</div>
  <div class="dot-filler">............................................................................................</div>
  <div class="price">$180,000.00</div>
</div>

<div class="menu-row">
  <div class="food-item">A</div>
  <div class="dot-filler">............................................................................................</div>
  <div class="price">$.01</div>
</div>

CSS

.food-item {
  float: left
}

.dot-filler {
  overflow: hidden;
  width: 0;
  float: left;
}

.price {
  float: right;
}

.menu-row {
  width: 400px;
}

JavaScript

console.log($(".food-item").width());

$(".menu-row").each(function(index, element) {
	var menuRowWidth = $(element).width();
  var foodItemWidth = $(element).children('.food-item').width();
  var priceWidth = $(element).children('.price').width();
  var $dotFiller = $(element).children('.dot-filler');
  var dotFillerWidth = menuRowWidth - foodItemWidth - priceWidth;
  $dotFiller.width(dotFillerWidth + "px"); 
});