How to balance progress bar dots - html

Question

Any way to ensure that the green line is equal length to the left and between the dots on this line? Even when the browser is resized?
I am not sure what the best way to do it is. I can make the lines the same size but cannot keep the right-hand circle at the end, or just make it look visually balanced.
#wrapper1 {
display: flex;
left: 0px;
right: 0px;
}
#item1 {
box-sizing: border-box;
display: flex;
flex: 1 1 0%;
padding: 24px 0px 41px;
}
#item1:after {
content: '';
height: 3px;
width: 120.313px;
align-self: center;
background: rgb(124, 179, 66) none repeat scroll 0% 0% / auto padding-box border-box;
flex: 1 1 auto;
opacity: 0.5;
}
#item1:before {
content: '';
height: 3px;
width: 120.313px;
align-self: center;
background: rgb(124, 179, 66) none repeat scroll 0% 0% / auto padding-box border-box;
flex: 1 1 auto;
opacity: 0.5;
}
#label_wrapper_1 {
align-self: center;
}
#label_wrapper_1:before {
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 5px;
color: rgba(255, 255, 255, 0.87);
content: '✓';
display: inline-block;
height: 25px;
min-width: 25px;
text-align: center;
align-self: center;
background: rgb(124, 179, 66) none repeat scroll 0% 0% / auto padding-box border-box;
border-radius: 40px 40px 40px 40px;
}
#wrapper2 {
box-sizing: border-box;
display: flex;
flex: 1 1 0%;
padding: 24px 0px 41px;
}
#wrapper2:before {
content: '';
height: 3px;
text-align: center;
align-self: center;
background: rgb(124, 179, 66) none repeat scroll 0% 0% / auto padding-box border-box;
flex: 1 1 auto;
opacity: 0.5;
}
#label_wrapper_2:before {
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 5px;
color: rgba(255, 255, 255, 0.87);
content: '✓';
display: inline-block;
height: 25px;
text-align: center;
width: 25px;
background: rgb(124, 179, 66) none repeat scroll 0% 0% / auto padding-box border-box;
border-radius: 40px 40px 40px 40px;
}
<div id="wrapper1">
<div id="item1">
<div id="label_wrapper_1">
</div>
</div>
<div id="wrapper2">
<div id="label_wrapper_2">
</div>
</div>
</div>
A fiddle for your convenience:
http://jsfiddle.net/ha7uqe9x/3/
Ideally I would like it to look more like this:

Answer 1

is this?
#wrapper1 {
display: flex;
left: 0px;
right: 0px;
position:relative;
}
#item1 {
box-sizing: border-box;
display: flex;
flex: 1 1 0%;
padding: 24px 0px 41px;
position:absolute;
left:50%;
transform:translateX(-50%);
}
#item1:after {
content: '';
height: 3px;
width: 120.313px;
align-self: center;
background: rgb(124, 179, 66) none repeat scroll 0% 0% / auto padding-box border-box;
flex: 1 1 auto;
}
#item1:before {
content: '';
height: 3px;
width: 120.313px;
align-self: center;
background: rgb(124, 179, 66) none repeat scroll 0% 0% / auto padding-box border-box;
flex: 1 1 auto;
}
#label_wrapper_1 {
align-self: center;
}
#label_wrapper_1:before {
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 5px;
color: rgba(255, 255, 255, 0.87);
content: '✓';
display: inline-block;
height: 25px;
min-width: 25px;
text-align: center;
align-self: center;
background: rgb(124, 179, 66) none repeat scroll 0% 0% / auto padding-box border-box;
border-radius: 40px 40px 40px 40px;
}
#wrapper2 {
box-sizing: border-box;
display: flex;
flex: 1 1 0%;
padding: 24px 0px 41px;
}
#wrapper2:before {
content: '';
height: 3px;
text-align: center;
align-self: center;
background: rgb(124, 179, 66) none repeat scroll 0% 0% / auto padding-box border-box;
flex: 1 1 auto;
}
#label_wrapper_2:before {
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 5px;
color: rgba(255, 255, 255, 0.87);
content: '✓';
display: inline-block;
height: 25px;
text-align: center;
width: 25px;
background: rgb(124, 179, 66) none repeat scroll 0% 0% / auto padding-box border-box;
border-radius: 40px 40px 40px 40px;
}
<div id="wrapper1">
<div id="item1">
<div id="label_wrapper_1">
</div>
</div>
<div id="wrapper2">
<div id="label_wrapper_2">
</div>
</div>
</div>