<div class="section">
  <div class="item">
    <div class="img blue">
    </div>
    <h4>Обучение с нуля</h4>
  </div>
  <div class="item">
    <div class="img purple">
    </div>
    <h4>Повышение квалификации</h4>
  </div>
</div>
.section {
  display: flex;
  justify-content: space-between;
  font-family: sans-serif;
  width: 512px;
}

.item {
  width: 45%;
}

.img {
  height: 42px;
  border-radius: 3px;
  margin-top: 64px;
  position: relative;
}

.img:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 32px;
  display: block;
  width: 64px;
  height: 64px;
  background: silver;
  border: 3px solid white;
  border-radius: 6px;
}

.blue {
  background: blue;
}

.purple {
  background: purple;
}

View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.