Как сверстать такой блок?

Question

[darkenie21]

Answer 1

[Ankhena]

Так и сверстать.
Три тега. Обертка, заголовок, абзац и псевдоэлемент к обертке.
https://jsfiddle.net/kc6tjaye/

<div class="wrap">
  <h1>Title</h1>
  <p>text</p>
</div>

.wrap {
  position: relative;
  width: 400px;
  padding-left: 70px;
  margin: auto;
}
.wrap::before {
  content: "⏰"; /*ваша иконка, можно инлайн svg или как bg, вариантов много*/
  position: absolute;
  top: 10px;
  left: 0;
  display: block; /*или флекс*/
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;  
  box-shadow: 0 0 0 2px orange, 0 0 0 7px white, 0 0 0 9px orange;
}

Если что-то не получается, то выложить код на jsfiddle.net и указать, в чём именно сложности.

Answer 2

[Алексей Джо]

https://jsfiddle.net/a4s2vmwh/

<div class="some">
  <div class="some__container">
    <div class="some__left">
      <i class="far fa-clock fa-3x"></i>
    </div>
    <div class="some__right">
      <div class="some__header">
        Lorem ipsum dolor sit amet
      </div>
      <div class="some__main">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
      </div>
    </div>
  </div>
</div>

.some {
  $parent: 'some';

  position: relative;
  
  &__container{
    padding: 30px 0;
    display: flex;
  }
  
  i {
    color: #f7833f;
  }
  
  &__left{
    margin-right: 50px;
  }
  
  &__right{
    display: flex;
    flex-direction: column;
    color: #657276;
    
    .#{$parent}__header{
      text-transform: uppercase;
      margin-bottom: 10px;
      font-weight: bold;
    }
  }
}

Comments

[Ankhena]

Направляющую-то вы зачем в разметку засунули? ))))

[Алексей Джо]

Ну да, в торопях не подумал про макет

[Алексей Джо]

Ankhena, улучшил ответ, убрал лишнее