CSSを使用してユーザー評価スコアカードを作成するにはどうすればよいですか？

CSSを使用して「ユーザー評価」スコアカードを作成するには、コードは次のとおりです-

例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<style>
   * {
      box-sizing: border-box;
   }
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      margin: 30px;
      max-width: 800px;
      padding: 20px;
   }
   .rateHeader {
      font-size: 25px;
      margin-right: 25px;
   }
   .fa {
      font-size: 25px;
      color: grey;
   }
   .rated {
      color: rgb(255, 0, 0);
      border: 2px solid yellow;
   }
   .data {
      float: left;
      width: 15%;
      margin-top: 10px;
      font-weight: bold;
   }
   .progressBar {
      margin-top: 10px;
      float: left;
      width: 70%;
   }
   .right {
      text-align: right;
   }
   .row:after {
      content: "";
      display: table;
      clear: both;
   }
   .progressContainer {
      width: 100%;
      background-color: #f1f1f1;
      text-align: center;
      color: white;
      border-radius: 10px;
   }
   .bar-1, .bar-2, .bar-3, .bar-4, .bar-5 {
      border-radius: 10px;
   }
   .bar-5 {
      width: 70%;
      height: 18px;
      background-color: rgb(76, 175, 162);
   }
   .bar-4 {
      width: 50%;
      height: 18px;
      background-color: rgb(243, 222, 33);
   }
   .bar-3 {
      width: 20%;
      height: 18px;
      background-color: #12d400;
   }
   .bar-2 {
      width: 65%;
      height: 18px;
      background-color: #ff0055;
   }
   .bar-1 {
      width: 40%;
      height: 18px;
      background-color: #a836f4;
   }
</style>
</head>
<body>
<span class="rateHeader">User Rating</span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star"></span>
<p>3.9 average based on 200 foodies.</p>
<div class="row">
<div class="data">
<div>5 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-5"></div>
</div>
</div>
<div class="data right">
<div>120</div>
</div>
<div class="data">
<div>4 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-4"></div>
</div>
</div>
<div class="data right">
<div>110</div>
</div>
<div class="data">
<div>3 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-3"></div>
</div>
</div>
<div class="data right">
<div>30</div>
</div>
<div class="data">
<div>2 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-2"></div>
</div>
</div>
<div class="data right">
<div>20</div>
</div>
<div class="data">
<div>1 star</div>
</div>
<div class="progressBar">>
<div class="progressContainer">
<div class="bar-1"></div>
</div>
</div>
<div class="data right">
<div>12</div>
</div>
</div>
</body>
</html>