JSFiddle - React, Tailwind, and code Playground

HTML

<table class="medical">
  <tr>
    <td class="type-txt bg-left"><span class="type-name">Total Cholesterol</span><span class="sm-font">A Type of Fat</span></td>
    <td class="bg-right" id="cho">80</td>
  </tr>
  <tr>
    <td class="type-txt bg-left"><span class="type-name">LDL</span><span class="sm-font">"Bad" Cholesterol</span></td>
    <td class="bg-right" id="ldl">1</td>
  </tr>
</table>

CSS

body {
  font-family: arial;
}

.medical {
  border-spacing: 0;
  border-collapse:collapse;
  border: 2px solid #f7f7f7;
}

.medical td{
  border-bottom: 2px solid #f7f7f7;
}

.bg-left {
  border-left: 10px solid #4CB900;
}

.bg-right {
  background: #4CB900;
  padding: 0px 20px;
  color: #fff;
}

.type-txt {
  padding: 10px 30px 10px 20px;
}

.type-name {
  color: #157DD4;
  font-size: 110%;
  display: block;
}

.sm-font {
  font-size: 80%;
}

JavaScript

var elems = document.getElementById("cho");
for (var i=0, m=elems.length; i<m; i++) {
if (elems[i].innerHTML>7)
  { elems[i].style.background="#ef0401";}
if (elems[i].innerHTML<=7)
  { elems[i].style.background="#4CB900";}
}