Html display a legend - html

Question

i'm working on a leaflet map and i want to add a legend on it by using a modal to do that.
In my modal i want to use a :
<ul><li>
and each ligne of my ul can be an horizontal line with a text or an icon with a text.
exemple :
-----(red) : Polyline of users
-----(green) : Polyline of the race
(icon) : marker of users ....
I don't know how to draw a red line in html/css to do something like that.
I have tried the <hr> but it's always take all the line.
thanks for your help.
I include the code of my modal :
<div id="infoModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Informations</h4>
</div>
<div class="modal-body">
<h2>Legende : </h2>
<ul class="list-group">
<li class="list-group-item">
<div class="col-md-4">
<hr width="25%" size="10">
</div>
<div class ="col-md-8">
TEST
</div>
</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Example (From Comment Section)

Answer 1

You could use flexbox and a pseudo-element.
.list-group-item {} .list-group-item div {
display: flex;
align-items: center;
}
.list-group-item div::before {
content: '';
flex: 1;
height: 5px;
background: red;
margin-right: 1em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal-body">
<h2>Legende : </h2>
<ul class="list-group">
<li class="list-group-item">
<div class="col-sm-12">
<img src="http://lorempixel.com/image_output/abstract-q-c-25-25-2.jpg" alt="">
</div>
</li>
</ul>
</div>

Answer 2

Try this:
.my-divider {
position: relative;
left: 100px;
}
.my-divider::before {
content: "";
position: absolute;
top: 50%;
left: -100px;
width: 100px;
border-bottom: 1px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-group">
<li class="list-group-item">
<div class="row">
<div class="col-md-offset-4 col-md-8 my-divider">TEST</div>
</div>
</li>
</ul>
Values are a bit arbitrary so change those to suit.