JSFiddle - React, Tailwind, and code Playground

HTML

<!--Market Example-->
<div class="essential-grid-unit-row-grid row-1">
  <div class="unit-rate-mapped">
    <div class="unit-rate-map">mk1234</div>
  </div>

  <div class="unit-qualifications">
    <a class="fusion-modal-text-link unit-qual-link" data-toggle="modal" data-target=".fusion-modal.form-affordable" href="#">Pre-Qualify</a>
  </div>
</div>

<!--Affordable Examples-->
<div class="essential-grid-unit-row-grid row-1">
  <div class="unit-rate-mapped">
    <div class="unit-rate-map">1b1b60</div>
  </div>

  <div class="unit-qualifications">
    <a class="fusion-modal-text-link unit-qual-link" data-toggle="modal" data-target=".fusion-modal.form-affordable" href="#">Pre-Qualify</a>
  </div>
</div>
<div class="essential-grid-unit-row-grid row-1">
  <div class="unit-rate-mapped">
    <div class="unit-rate-map">2b1b60</div>
  </div>

  <div class="unit-qualifications">
    <a class="fusion-modal-text-link unit-qual-link" data-toggle="modal" data-target=".fusion-modal.form-affordable" href="#">Pre-Qualify</a>
  </div>
</div>
<div class="essential-grid-unit-row-grid row-1">
  <div class="unit-rate-mapped">
    <div class="unit-rate-map">3b1b60</div>
  </div>

  <div class="unit-qualifications">
    <a class="fusion-modal-text-link unit-qual-link" data-toggle="modal" data-target=".fusion-modal.form-affordable" href="#">Pre-Qualify</a>
  </div>
</div>

<!--Market Example-->
<div class="essential-grid-unit-row-grid row-1">
  <div class="unit-rate-mapped">
    <div class="unit-rate-map">mk12345</div>
  </div>

  <div class="unit-qualifications">
    <a class="fusion-modal-text-link unit-qual-link" data-toggle="modal" data-target=".fusion-modal.form-affordable" href="#">Pre-Qualify</a>
  </div>
</div>

<!--Affordable Example-->
<div class="essential-grid-unit-row-grid row-1">
  <div class="unit-rate-mapped">
    <div class="unit-rate-map">1b1b60</div>
  </div>

  <div class="unit-qualifications">
    <a class="fusion-modal-text-link unit-qual-link" data-toggle="modal"...

CSS

.essential-grid-unit-row-grid {
  background: #ffffff;
  padding: 20px 20px 20px 20px;
  border-width: 1px 1px 1px 1px;
  border-radius: 8px 8px 8px 8px;
  border-color: #cecece;
  border-style: solid;
  display: grid;
  grid-template-columns: -webkit-max-content 1fr;
  grid-template-columns: max-content 1fr;
  text-align: left;
  -webkit-align-items: center;
  align-items: center;
  grid-column-gap: 8px;
  margin-bottom: 10px;
}

JavaScript

jQuery(document).ready(function ($) { //replaces all instances of $ with jquery for Wordpress
    $(".essential-grid-unit-row-grid").each(function () {
        if ($(this).find(".unit-rate-map").is(':contains("mk")')) { //Only Market Rate units codes will contain mk
            $(this).find(".unit-rate-map").html('Market Rate'); //Change the HTML value to Market Rate
            $(this).find(".unit-rate-map").css({ "background": "rgba(4,57,99,.1)", "color": "#043963" }); //Change the background color and type to blue
            $(this).find(".unit-qual-link").attr("data-target", ".fusion-modal.form-market"); //Change the data-target to .fusion-modal.form-market
        } else { //Anything and everything else goes to orange
            $(this).find(".unit-rate-map").html('Affordable'); //Change the HTML value to Affordable
            $(this).find(".unit-rate-map").css({ "background": "rgba(229,104,53,.1)", "color": "#e56835" }); //Change the background color and type to orange
        }
    });
});