JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<div class="container">
    <div class="row list"></div>
</div

CSS

*, ::after, ::before {
    box-sizing: border-box;
}
.container{
    max-width: 500px;
    margin: 0 auto;
}
.row{
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.col {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 24%;
    max-width: 24%;
    margin: 1% .5%;
    border: 1px solid #999;
    border-radius: 5px;
    padding: 25px 5px;
    text-align: center;
    box-shadow: 1px 1px 2px #ddd;
}
span.letter {
    margin: 5px 0;
    display: inline-block;
    font-size: 25px;
    font-weight: bold;
    font-family: cursive;
    text-shadow: 1px 1px 1px white, 2px 2px 1px red;
}

.name {
    margin-top: 5px;
    font-size: 16px;
    color: #666;
}

JavaScript

$list = {
  "CM": "Classic Manicure",
  "CU": "Clean Up",
  "FCUS": "Face Clean Up Full Tool Set",
  "FFW": "Full Face Waxing",
  "FR": "Foot Reflexology",
  "KM": "Kids Manicure",
  "FCU": "Face Clean Up",
  "GFTK": "Gel French Tool kit",
};
$(document).ready(function() {
  function nth_occurrence(string, char, nth) {
    var first_index = string.indexOf(char);
    var length_up_to_first_index = first_index + 1;

    if (nth == 1) {
      return first_index;
    } else {
      var string_after_first_occurrence = string.slice(length_up_to_first_index);
      var next_occurrence = nth_occurrence(string_after_first_occurrence, char, nth - 1);

      if (next_occurrence === -1) {
        return -1;
      } else {
        return length_up_to_first_index + next_occurrence;
      }
    }
  }

  function replaceAt(s, n, t) {
    return s.substring(0, n) + t + s.substring(n + 1);
  }
  $.each($list, function(key, name) {
    if (name.match(/ /g).length === 1) {
      name = name.replace(" ", "<br>")
    } else if (name.match(/ /g).length === 2 || name.match(/ /g).length === 3) {
      let second = nth_occurrence(name, " ", 2)
      name = replaceAt(name, second, "<br>");
    }

    html = '<div class="col">\
            <div>\
                <span class="letter">' + key + '</span>\
                <div class="name">' + name + '</div>\
            </div>\
        </div>';
    $('.list').append(html);
  });
});