I'm trying to achieve this UI here

---

I've tried

CSS

<style type="text/css">

#cb-key-danger{
  width: 15px;
  height: 15px;
  background-color: #F46E4E;
}

#cb-key-warning{
  width: 15px;
  height: 15px;
  background-color: #F9C262 ;
}

#cb-key-success{
  width: 15px;
  height: 15px;
  background-color: #ADB55E;
}

.cb-key-row{
  background-color: #E2E2E2 ;
  font-size: 10px;
}

.cb-key-row span {
 display: inline;
}



</style>

---

HTML

<div class="row cb-key-row ">
  <div class="col-sm-4 col-md-4 col-lg-4">
    <div id="cb-key-danger" ></div>
    <span> &lt; 50% CLASS AVERAGE SCORE </span>
  </div>

  <div class="col-sm-4 col-md-4 col-lg-4">
    <div id="cb-key-warning" ></div>
    <span> 50% UP TO 75% CLASS AVERAGE SCORE </span>
  </div>

  <div class="col-sm-4 col-md-4 col-lg-4">
    <div id="cb-key-success" ></div>
    <span> &gt; OR EQUAL TO 75% CLASS AVERAGE SCORE </span>
  </div>
</div>

---

Result

How can I make my texts stay next to my icons ?

JSFiddle

#cb-key-danger{
  width: 15px;
  height: 15px;
  background-color: #F46E4E;
  display: inline-block;
}

#cb-key-warning{
  width: 15px;
  height: 15px;
  background-color: #F9C262;
  display: inline-block;
}

#cb-key-success{
  width: 15px;
  height: 15px;
  background-color: #ADB55E;
  display: inline-block;
}

.cb-key-row{
  background-color: #E2E2E2 ;
  font-size: 10px;
}

.cb-key-row span {
 display: inline;
}