JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

CSS

* {
  font-family: 'monospace';
}

JavaScript

function getReceiptItem(name, cost, maxLength) {
  var dotsLength = maxLength - name.length - cost.length - '$'.length;
	
  if (dotsLength < 0) {
  	name = name.substring(0, name.length + dotsLength);
    dotsLength = 0;
  }
  
  return name + Array(dotsLength).join('.') + cost + '$';
}
	var items = [
  	{
      name: 'apple',
      cost: '20.58'
    },
    {
    	name: 'banana and ice cream',
      cost: '4.99'
    }
  ]
  
  var itemsHtml = items.map(function(item){
  	return '<p>' + getReceiptItem(item.name, item.cost, 30) + '</p>';
  }).join('');
  
  document.querySelector('body').innerHTML = itemsHtml;