Block icons

by delux

HTML

<div class="advantages">
        <div class="advantages__item">
          <div class="icon">icon</div>
          <div>
          	<h4>Заголовок</h4>
          Ut porttitor quam nec risus ultricies efficitur. Pellentesque sagittis sed magna scelerisque consectetur.
          </div>
        </div>

                <div class="advantages__item">
          <div class="icon">icon</div>
          <div>
          	<h4>Заголовок</h4>
          Ut porttitor quam nec risus ultricies efficitur. Pellentesque sagittis sed magna scelerisque consectetur.
          Ut porttitor quam nec risus ultricies efficitur. Pellentesque sagittis sed magna scelerisque consectetur.
          Ut porttitor quam nec risus ultricies efficitur. Pellentesque sagittis sed magna scelerisque consectetur.
          Ut porttitor quam nec risus ultricies efficitur. Pellentesque sagittis sed magna scelerisque consectetur.
          </div>
        </div>
          <div class="advantages__item">
          <div class="icon">icon</div>
          <div>
          	<h4>Заголовок</h4>
          Ut porttitor quam nec risus ultricies efficitur. Pellentesque sagittis sed magna scelerisque consectetur.
          </div>
        </div>
      </div>

CSS

.advantages { display: grid; grid-row-gap: 30px; }
.advantages__item {display: grid;grid-template-columns: auto 1fr;grid-column-gap: 20px;}
.advantages__item .icon {background: #15acf2; padding: 20px;}
.advantages__item h4 { padding: 0; margin: 0; }