JSFiddle - React, Tailwind, and code Playground

by TrueBlueAussie

HTML

<div class="menu-price-value">$3.00</div>
<div class="menu-price-value">two per person $4.95</div>
<div class="menu-price-value">small $5.00|medium $10.00|large $15.00</div>

CSS

.space {
    display: inline-block;
    width: 20px;
    border: 1px solid green;
}
.remove-space {
    color: red;
}

JavaScript

$('.menu-price-value:contains(" $"):not(:contains("|"))').html(function () {
          return $(this).html().replace(/\$/g, '<span class="space">                                             </span>$');
      });

      $('.menu-price-value:contains("|")').html(function () {
          return $(this).html().replace(/\|/g, "&nbsp;|&nbsp;");
      }).addClass('remove-space');