how to align a progress bar at the end of the previous?

Question

I would like to know how to display a new progressbar which is displayed below the previous one but which must start where the previous one was finish

.meter {
  height: 10px;
  border-radius: 20px;
  border-style: none;
  margin-right: 40px;
  background: red
}

.progress {
  width: 40%;
  border-radius: 15px;
  border-style: none;
  background: blue
}

<p> not this </p>
<div class="meter" style="width:100px">
<div class="progress">
    <div>40%</div>
</div>
</div> <br>

<div class="meter" style="width:100px">
<div class="progress">
    <div>40%</div>
    </div>
</div>


<p> something like this </p>
<div class="meter" style="width:100px">
<div class="progress">
    <div>40%</div>
</div>
</div>
<div class="meter" style="width:100px; margin-left: 100px">
<div class="progress">
    <div>40%</div>
    </div>
</div>
<div class="meter" style="width:100px; margin-left: 200px">
<div class="progress">
    <div>40%</div>
    </div>
</div>

i would like know in this exemple how to make the second progress bar starts below the end of the first.

EDIT: i edited my code; i use a loop ( .map in ReactJs ) to add new progress Bar

Answer 1

Here is an idea with some float hack

.meter {
  border-radius: 20px;
  margin-right: 40px;
  background: red;
  margin-bottom:10px;
}
/* Define the height of the meter since the progress is floating*/
.meter:before{
  content:"";
  display:inline-block;
  vertical-align:top;
  height:1.1em;  /* the height of a text line */
  width: 0px; /* to not affect the total width */
}
/**/

.progress {
  border-radius: 15px;
  background: blue;
  color: #fff;
  float:left;
  margin-bottom:3em; /* Big enough to push the next float*/
}

<div class="meter" >
  <div class="progress" style="width: 40%;">
    40%
  </div>
</div>

<div class="meter" >
  <div class="progress" style="width: 20%;">
    20%
  </div>
</div>

<div class="meter" >
  <div class="progress" style="width: 10%;">
    10%
  </div>
</div>


<div class="meter" >
  <div class="progress" style="width: 20%;">
    20%
  </div>
</div>

<div class="meter" >
  <div class="progress" style="width: 10%;">
    10%
  </div>
</div>

That you can simplify and use one element for each meter:

.meter {
  border-radius: 20px;
  background: red;
  margin-bottom:10px;
}
/* Define the height of the meter since the progress is floating*/
.meter:before{
  content:"";
  display:inline-block;
  vertical-align:top;
  height:1.1em;  /* the height of a text line */
  width: 0px; /* to not affect the total width */
}
/**/

.meter:after {
  content:attr(data-percentage);
  width:var(--p,0);
  border-radius: 15px;
  background: blue;
  color: #fff;
  float:left;
  margin-bottom:3em; /* Big enough to push the next float*/
}

<div class="meter" data-percentage="40%" style="--p:40%"></div>

<div class="meter" data-percentage="20%" style="--p:20%"></div>

<div class="meter" data-percentage="10%" style="--p:10%"></div>

<div class="meter" data-percentage="20%" style="--p:20%"></div>

<div class="meter" data-percentage="10%" style="--p:10%"></div>

UPDATE

Based on your last edit you can still consider the same trick

.meter {
  border-radius: 20px;
  border-style: none;
  background: red;
  margin-bottom:10px;
  float:left;
}

.progress {
  width: 40%;
  border-radius: 15px;
  border-style: none;
  background: blue
}
.container:after {
  content:"";
  display:inline-block;
  height:1.1em;
}

<p> something like this </p>
<div class="container">
<div class="meter" style="width:100px">
<div class="progress">
    <div>40%</div>
</div>
</div>
</div>
<div class="container">
<div class="meter" style="width:100px;">
<div class="progress">
    <div>40%</div>
    </div>
</div>
</div>
<div class="container">
<div class="meter" style="width:100px;">
<div class="progress">
    <div>40%</div>
    </div>
</div>
</div>