Creating this graph using css - html

Question

I need to create this image into my HTML using CSS.
As you can see, there is two bar graphs aligned to the right. each bar graph has a set of bars, numbers and texts. the text is the to left aligned right, the number is to the right aligned right, and each bar is in between the text and the number.
Like I said, I have no understanding of this level of css so please treat this as a css newbie
any information would be greatly appreciated.
UPDATE
I have not tried producing any code for this. I have no idea how to handle this task.
So I was able to get the text on the left but i cannot get the value on the right. Its showing up as a new line on the right
Here is my css:
.container {
width: 500px;
margin-bottom: 20px;
margin-top: 10px;
background: #fff;
padding-bottom: 20px;
padding-top: 10px;
overflow: hidden;
float: left;
}
.horizontal .progress-bar {
float: left;
height: 45px;
width: 100%;
padding: 12px 0;
}
.horizontal .progress-track {
position: relative;
width: 50%;
height: 20px;
background: #FFFFFF;
float:right;
margin-left:-20px;
}
.horizontal .progress-fill {
position: relative;
background: #2272af;
height: 20px;
width: 50%;
color: #fff;
text-align: center;
font-family: "Lato","Verdana",sans-serif;
font-size: 12px;
line-height: 20px;
border-radius: 5px;
}
.horizontal .progress-bar-label
{
position:relative;
display:inline-block;
white-space:nowrap;
padding-left:215px;
}
.horizontal .progress-bar-value
{
position:relative;
display:inline-block;
white-space:nowrap;
padding-right:-15px;
/**padding:0;*/
}
And here is my HTML:
<div class="progress-bar horizontal">
<span class="progress-bar-label">test</span>
<div class="progress-track">
<div class="progress-fill" style="width: 100%;">
</div>
</div>
<span class="progress-bar-value">125</span>
</div>
Not quite sure how to get the value of 125 on the right of the graph bar

Answer 1

This is using HTML CSS and Jquery http://codepen.io/ntibbs/pen/MaPpKr
<div class="progress-bar">
<div class="progress-bar-label">test</div>
<div class="progress-track">
<div class="progress-fill" style="width: 100%;">
</div>
</div>
<div class="progress-bar-value">125</div>
</div>
.container {
width: 500px;
margin-bottom: 20px;
margin-top: 10px;
background: #fff;
padding-bottom: 20px;
padding-top: 10px;
overflow: hidden;
float: left;
}
.progress-bar {
height: 45px;
width: 100%;
}
.progress-bar-label {
position:relative;
display: inline-block;
width: 10%;
}
.progress-track {
display: inline-block;
position: relative;
height: 20px;
background: #FFFFFF;
width: 75%;
}
.progress-fill {
position: relative;
background: #2272af;
height: 20px;
color: #fff;
text-align: center;
font-family: "Lato","Verdana",sans-serif;
font-size: 12px;
line-height: 20px;
border-radius: 5px;
}
.progress-bar-value {
display: inline-block;
float: right;
}