<!-- Table -->
<h3>Table</h3>
<div class="container">
  <div class="item">
    <span class="prefix">HTML/CSS(SCSS)</span>
    <span class="bar"><progress value="4.3" max="10"/></span>
    <span class="suffix">4.3</span>
  </div>
  <div class="item">
    <span class="prefix">JS</span>
    <span class="bar"><progress value="7.3" max="10"/></span>
    <span class="suffix">7.3</span>
  </div>
  <div class="item">
    <span class="prefix">JAVA</span>
    <span class="bar"><progress value="2" max="10"/></span>
    <span class="suffix">2</span>
  </div>
  <div class="item">
    <span class="prefix">PHP</span>
    <span class="bar"><progress value="1.3" max="10"/></span>
    <span class="suffix">1.3</span>
  </div>
</div>

<!-- Flex -->
<h3>Flex</h3>
<div class="flex_container">
  <div class="item">
    <span class="prefix">HTML/CSS(SCSS)</span>
    <span class="bar"><progress value="4.3" max="10"/></span>
    <span class="suffix">4.3</span>
  </div>
  <div class="item">
    <span class="prefix">JS</span>
    <span class="bar"><progress value="7.3" max="10"/></span>
    <span class="suffix">7.3</span>
  </div>
  <div class="item">
    <span class="prefix">JAVA</span>
    <span class="bar"><progress value="2" max="10"/></span>
    <span class="suffix">2</span>
  </div>
  <div class="item">
    <span class="prefix">PHP</span>
    <span class="bar"><progress value="1.3" max="10"/></span>
    <span class="suffix">1.3</span>
  </div>
</div>

<!-- Flex -->
<h3>Flex</h3>
<div class="flex_container">
  <div class="item">
    <span class="prefix">HTML/CSS</span>
    <span class="bar"><progress value="4.3" max="10"/></span>
    <span class="suffix">4.3</span>
  </div>
  <div class="item">
    <span class="prefix">JS</span>
    <span class="bar"><progress value="7.3" max="10"/></span>
    <span class="suffix">7.3</span>
  </div>
  <div class="item">
    <span class="prefix">JAVA</span>
    <span class="bar"><progress value="2" max="10"/></span>
    <span class="suffix">2</span>
  </div>
  <div class="item">
    <span class="prefix">PHP</span>
    <span class="bar"><progress value="1.3" max="10"/></span>
    <span class="suffix">1.3</span>
  </div>
</div>

.container {
  display: table;
  border-collapse: collapse;
  width: 400px;
  .item {
    display: table-row;
    align-items: center;
    font-size: 14px;
    line-height: 17px;
    &:not(:last-child) {
       border-bottom: 7px solid transparent;
    }
    .prefix, .bar, .suffix {
      display: table-cell;
      height: 40px;
      vertical-align: middle;
    }
    .prefix {
      white-space: nowrap;
    }
    .bar {
      width: 100%;
      padding: 0 8px; 
      progress {
        width: 100%;
      }
    }
    .suffix {
      white-space: nowrap;
      text-align: center;
    }
  }
}

.flex_container {
  width: 400px;
  .item {
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 17px;
    &:not(:last-child) {
       border-bottom: 7px solid transparent;
    }
    .prefix {
      flex-basis: 20%;
    }
    .bar {
      flex: 1; 
            padding: 0 8px; 
      progress {
        width: 100%;
      }
    }
  }
}