sibling span width confusion getting percentage of the preceding sibling

Question

I am trying a very simple project item-list/progress display (non-interactive, just a static display) which intends to show various categories overlaid as progress boxes, like so:

.plan {
   list-style: none;
}

.plan li {
    display: block;
}


.progress a {
    text-decoration: none;
}

.plan .subject {

}


.plan .progress {
    background-color: #eee;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
    border-radius: 8px;
    margin-bottom: 1ex;
    position: relative;
    display: inline-block;
}


.progress span {
    height: 100%;
    border-radius: 8px 0 0 8px;
    display: inline-block;
}

.progress a {
    padding: 2px 1ex;
    display: inline-block;
}

.progress .done {
  background-color: lightgreen;
}

.progress .critical  {
  background-color: crimson;
}


.progress .todo  {
  background-color: cyan;
}

<ul class="plan">
    <li>
        <div class="progress">
            <span class="done" style="width: 55%"/>
            <span class="todo" style="width: 35%"/>
            <span class="critical" style="width: 25%"/>
            <a href=".">1234567</a>
        </div>
        <span class="subject"> lorem ipsum dolor sit amet </span>
    </li>

    <li>
        <div class="progress">
            <span class="done" style="width: 80%"/>
            <span class="todo" style="width: 50%"/>
            <a href=".">8901234</a>
        </div>
        <span class="subject"> phasellus elit orci, suscipit et eros eu, consequat viverra sem. </span>
    </li>
</ul>

In the above example, my intention is to set width of the nested span elements of div.progress, to be the percentage of the div.progress box size itself. However, as can be seen in the output, successive spans set their width to the percentage of their preceding sibling. E.g. in the first item the 55% is that of the id box, as intended. The following 35% is that of the 55% which is .55*.35 = 19.25% of the id box), and the third 25% width is .1925*.25=~5% of the id box.

How can I get the sibling span to be the percentage of the parent div?

Alternative layout suggestions would be very much appreciated. The objective here is to display individual sub-categories (e.g. critical, todo, done) as a percentage of a total, whose size is based on the item they overlay (here the <a> element with the item id). For example, they could've been sized as individual boxes which would line up as, 25%, 10%, and 20% and remainder 45% (gray) as default, respectively for the first item.

Answer 1

I hope I've understood your question correctly...

I would change the HTML. Un-nest the span tags, close them correctly and wrap them in a div which will allow you to position them easier:

<li>
    <div class="progress">
      <div class="prog-bars">
        <span class="done"></span>
        <span class="todo"></span>
        <span class="critical"></span>
      </div>
      <a href="#">1234567</a>
    </div>
    <span class="subject"> lorem ipsum dolor sit amet </span>
  </li>

Then you need to make a few changes to the CSS.

Firstly, give .progress a position:

.plan .progress {
  position: relative;
}

Now you can style the new class, .prog-bars

.prog-bars {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  text-align: left;
  font-size: 0; /*this removes white space between spans */
}

This places the div directly over the progress div. Now you can style the spans. (Note that you can target the border-radius more precisely also):

.prog-bars .done {
  background-color: lightgreen;
  width: 55%;
  border-radius: 8px 0 0 8px;
}

.progress .todo {
  background-color: cyan;
  width: 35%;
}

.progress .critical {
  background-color: crimson;
  width: 5%;
  border-radius: 8px 8px 0 0;
}

Now your link text will have disappeared. You need to give it a z-index so it will display over the spans. You also need to give it a position for z-index to work correctly (I'm not sure why..)

 .progress a {
      z-index: 444;
      position: relative;
  }

View Codepen

EDIT: Assign width:auto to .progress, which will accommodate link text of varying sizes.

.plan {
  list-style: none;
}

.plan li {
  display: block;
}

.progress a {
  text-decoration: none;
  font-family: sans-serif;
  font-size: 20px;
  z-index: 444;
  position: relative;
  padding: 2px;
  display: inline-block;
  color: #000;
}

.plan .progress {
  background-color: #eee;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
  border-radius: 8px;
  margin-bottom: 1ex;
  position: relative;
  display: inline-block;
  width: 100px;
  text-align: center;
  vertical-align: middle;
}

.prog-bars {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  text-align: left;
  font-size: 0;
}

.progress span {
  height: 100%;
  display: inline-block;
}

.prog-bars .done {
  background-color: lightgreen;
  width: 45%;
  border-radius: 8px 0 0 8px;
}

.progress .todo {
  background-color: cyan;
  width: 25%;
}

.progress .critical {
  background-color: crimson;
  width: 10%;
  border-radius: 8px 8px 0 0;
}

<ul class="plan">
  <li>
    <div class="progress">
      <div class="prog-bars">
        <span class="done"></span>
        <span class="todo"></span>
        <span class="critical"></span>
      </div>

      <a href="#">1234567</a>

    </div>
    <span class="subject"> lorem ipsum dolor sit amet </span>
  </li>

  <li>
    <div class="progress">
      <div class="prog-bars">

        <span class="done"></span>
        <span class="todo"></span>
      </div>
      <a href="#">8901234</a>
    </div>
    <span class="subject"> phasellus elit orci, suscipit et eros eu, consequat viverra sem. </span>
  </li>
</ul>