<div class="wrapper">
  <div class="card">
    <h3 class="card__title">100</h3>
    <div class="card__visual ">
      <div class="visual visual--100"></div>
    </div>
    <p class="card__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi, quis itaque dolorum porro cupiditate alias fugiat at unde rerum ab, iste est. Similique voluptatibus ad praesentium debitis error. Assumenda nihil voluptates perspiciatis quos numquam ducimus animi enim deserunt obcaecati officiis ad libero, dolorem a laboriosam explicabo labore est ipsam hic rem nostrum rerum reprehenderit perferendis corrupti minus. Nostrum eos, quasi obcaecati ea architecto consequatur!</p>
  </div>
  <div class="card">
    <h3 class="card__title">75</h3>
    <div class="card__visual">
      <div class="visual visual--75"></div>
    </div>
    <p class="card__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi, quis itaque dolorum porro cupiditate alias fugiat at unde rerum ab, iste est. Similique voluptatibus ad praesentium debitis error. Assumenda nihil voluptates perspiciatis quos numquam ducimus animi enim deserunt obcaecati officiis ad libero, dolorem a laboriosam explicabo labore est ipsam hic rem nostrum rerum reprehenderit perferendis corrupti minus. Nostrum eos, quasi obcaecati ea architecto consequatur!</p>
  </div>
  <div class="card">
    <h3 class="card__title">50</h3>
    <div class="card__visual">
      <div class="visual visual--50"></div>
    </div>
    <p class="card__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi, quis itaque dolorum porro cupiditate alias fugiat at unde rerum ab, iste est. Similique voluptatibus ad praesentium debitis error. Assumenda nihil voluptates perspiciatis quos numquam ducimus animi enim deserunt obcaecati officiis ad libero, dolorem a laboriosam explicabo labore est ipsam hic rem nostrum rerum reprehenderit perferendis corrupti minus. Nostrum eos, quasi obcaecati ea architecto consequatur!</p>
  </div>
  <div class="card">
    <h3 class="card__title">Итог</h3>
    <div class="card__visual">
      <div class="visual visual--25"></div>
    </div>
    <p class="card__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi, quis itaque dolorum porro cupiditate alias fugiat at unde rerum ab, iste est. Similique voluptatibus ad praesentium debitis error. Assumenda nihil voluptates perspiciatis quos numquam ducimus animi enim deserunt obcaecati officiis ad libero, dolorem a laboriosam explicabo labore est ipsam hic rem nostrum rerum reprehenderit perferendis corrupti minus. Nostrum eos, quasi obcaecati ea architecto consequatur!</p>
  </div>
</div>

body {
  background: #3e4444;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.card {
  padding: 0 15px;
  color: #f2f2f2;
  &__visual {
    height: 50px;
    position: relative;
    display: flex;
    align-items: center;
  }
}

.visual {
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,212,255,1) 100%);
  position: absolute;
  left: -15px;
  right: -15px;
  &--100 {
    height: 100%;
  }
  &--75 {
    height: 75%;
    background: linear-gradient(90deg, 
      rgba(0,212,255,1) 0%, rgba(2,0,36,1) 100%);
  }
  &--50 {
    height: 50%;
  }
  &--25 {
    height: 25%;
    background: linear-gradient(90deg, 
      rgba(0,212,255,1) 0%, rgba(2,0,36,1) 100%);
  }
}