Как сверстать этот блок?

* { box-sizing: border-box; }
li { list-style-type: none; }
p { margin: .5rem 0 2.5rem .5rem;
    letter-spacing: .2rem;
    text-transform: uppercase; }
progress, output { display: block; }
progress { border-radius: 0; width: 100%; height: 5px; }
progress::-webkit-progress-bar { background-color: #aaa; }
progress::-moz-progress-bar { background-color: #aaa; }
progress::-webkit-progress-value { background-color: #000; }
progress::-moz-progress-value { background-color: #000; }
li output { position: absolute; transform: translate(-4rem, .5rem); }
li:nth-child(1) output{ margin-left: 90%; }
li:nth-child(2) output{ margin-left: 80%; }
li:nth-child(3) output{ margin-left: 85%; }

<ul>
  <li>
    <progress value="0.90"></progress>
    <output>90%</output>
    <p>Branding</p>
  </li>
  <li>
    <progress value=".80"></progress>
    <output>80%</output>
    <p>Design</p>
  </li>
  <li>
    <progress value=".85"></progress>
    <output>85%</output>
    <p>Development</p>
  </li>
</ul>

.progress {
    position:     relative;
    
    border-top:   3px solid black;
    
    width:        300px;
    
    padding-top:  10px;
    
    text-transform: uppercase;
    letter-spacing: .2rem;
}
.progress:after {
    position:     absolute;
    top:          -3px;
    right:        0px;
    
    border-top:   3px solid #c0c0c0;
    width:        calc(100% - 75%);
    
    padding-top:  10px;
    margin-left: -24px;
    content:      "75%";
    text-indent:  -25%;
    
    text-transform: uppercase;
    letter-spacing: .2rem;
    
    color:        #c0c0c0;
}

<div class = 'progress'>НАЗВАНИЕ</div>