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> < 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> > OR EQUAL TO 75% CLASS AVERAGE SCORE </span>
</div>
</div>
Result
How can I make my texts stay next to my icons ?