Aligning three element in CSS - css

Question

I'm looking to get the dots aligned, fixed, and should not move. This is what I need it to look like:
This is what I have so far below. As you can see if there are double digits, the dot moves.
This is what I'm rendering on the DOM. As you can see I have separated all three items into their own span.
<div className="Legend-Component col-3" align="center">
{legendData.map((item, index) => (
<ul key={index}>
<li>
<span className="Legend-Name" onClick={() => this.handleClick(item.assetManagerId)}>
{item.name}
</span>
<span className={`${item.className[index]}`}></span>
<span className="Legend-Total">{item.total}</span>
</li>
</ul>
))}
</div>
My CSS:
.Legend-Component ul {
list-style-type: none;
font-size: 12px;
text-align: right;
margin: auto;
}
.Legend-Name{
color: #006192;
cursor: pointer;
}
.Legend-Total {
font-weight: bold;
}
.navy {
display: inline-block;
width: 13px;
height: 13px;
background-color: #001f3f;
border-radius: 50%;
border: 1px solid grey;
}
.blue {
display: inline-block;
height: 13px;
width: 13px;
background-color: #0074D9;
border-radius: 50%;
border: 1px solid grey;
margin: 0 2px;
}
.aqua {
display: inline-block;
height: 13px;
width: 13px;
background-color: #7FDBFF;
border-radius: 50%;
border: 1px solid grey;
margin: 0 2px;
}
.teal {
display: inline-block;
height: 13px;
width: 13px;
background-color: #39CCCC;
border-radius: 50%;
border: 1px solid grey;
margin: 0 2px;
}

Answer 1

Make each list item a flex item. Allow the left and right elements to fill the available space with flex: 1.
This will keep the circles centred.
ul {
list-style: none;
padding: 0;
}
.circle {
display: inline-block;
height: 13px;
width: 13px;
border-radius: 50%;
border: 1px solid grey;
margin: 0 2px;
}
.blue {
background-color: #0074D9;
}
/* The important bits... */
.legend-item {
display: flex;
}
.legend-name {
flex: 1;
text-align: right;
}
.legend-total {
flex: 1;
}
<div className="Legend-Component col-3">
<ul key={index}>
<li class="legend-item">
<span class="legend-name">
Legend Name
</span>
<span class="circle blue"></span>
<span class="legend-total">00</span>
</li>
<li class="legend-item">
<span class="legend-name">
Legend Name
</span>
<span class="circle blue"></span>
<span class="legend-total">000</span>
</li>
<li class="legend-item">
<span class="legend-name">
Legend Name Long
</span>
<span class="circle blue"></span>
<span class="legend-total">0</span>
</li>
</ul>
</div>
If you need to align the circles off-centre, you may have to play with the flex-basis:
ul {
list-style: none;
padding: 0;
}
.circle {
display: inline-block;
height: 13px;
width: 13px;
border-radius: 50%;
border: 1px solid grey;
margin: 0 2px;
}
.blue {
background-color: #0074D9;
}
/* The important bits... */
.legend-item {
display: flex;
}
.legend-name {
flex: 1;
flex-basis: 100%;
text-align: right;
}
.legend-total {
flex: 1;
flex-basis: 50px;
}
<div className="Legend-Component col-3">
<ul key={index}>
<li class="legend-item">
<span class="legend-name">
Legend Name
</span>
<span class="circle blue"></span>
<span class="legend-total">00</span>
</li>
<li class="legend-item">
<span class="legend-name">
Legend Name
</span>
<span class="circle blue"></span>
<span class="legend-total">000</span>
</li>
<li class="legend-item">
<span class="legend-name">
Legend Name Long
</span>
<span class="circle blue"></span>
<span class="legend-total">0</span>
</li>
</ul>
</div>