JSFiddle - React, Tailwind, and code Playground

HTML

<span>
<ul class="list-group">
 
  <li class="list-group-item d-flex justify-content-between align-items-center rouge">
<span class="badge badge-primary badge-pill">A</span>
    Jhon PAPOU
  </li>
 
  <li class="list-group-item d-flex justify-content-between align-items-center vert">
 <span class="badge badge-primary badge-pill">B</span>
   Lionel Melin
  </li>
 
  <li class="list-group-item d-flex justify-content-between align-items-center jaune">
<span class="badge badge-primary badge-pill">C</span>
   OSMEL GIBI
  </li>
</ul>
</span>

<span id="legende"> 
<span class="legende lvert">&nbsp;</span>faible 
<span class="legende ljaune">&nbsp;</span>moyen 
<span class="legende lrouge">&nbsp;</span>fort
<span class="legende lnoir">&nbsp;</span>critique
</span>
</span>

CSS

ul {
  width: 150px;
  display: inline-block;
  padding-right: 10px;
  }
#legende{
  display: inline-block;
  width: 300px;
  font-size: 11px;
  line-height: 25px;
}

.rouge { border-right: solid 4px red; }
.vert { border-right: solid 4px green; }
.jaune { border-right: solid 4px gold; }
.noir { border-right: solid 4px #000000; }
.legende {
    display: inline-block;
    border: solid 1px #000000;
    height: 18px;
    width: 18px;
    margin-right: 5px;
    }
.lrouge { background-color: red; }
.lvert { background-color: green; }
.ljaune { background-color: gold; }
.lnoir { background-color: #000000; }