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

Question

[Кодер Кодер]

Верстаю макет первый раз. Сверстал каркас, теперь вернулся к нюансам.. Один такой нюанс забрал у меня немало времени. Помогите) Как сделать так, чтобы справа от svg значка вставить 40+ и сразу под этим числом слово "проектов"?
Надо так:

у меня получается так:

Пытался делать и с помощью псевдоэлемента ::before, но не получается.

Answer 1

[Vlad Volkov]

<div class="box">
	<div class="block">
		<div class="block_img">
			<img src="#" alt="">
		</div>
		<div class="block_text">
			<p>40+</p>
			<span>проектов</span>
		</div>
	</div>
	<!-- добавить нужное количество блоков .block -->
</div>

.box
  display: flex
  // justify-content: space-around
  // или 
  // justify-content: space-between
  .block
    display: flex
    align-items: center
    .block_img
      max-width: 50px
      img
        width: 100%
    .block_text
      span
        display: block

Comments

[Кодер Кодер]

Спасибо! сделал так. https://jsfiddle.net/4sao8xhj/8/

Answer 2

[Kirill Makarov]

Либо используешь флекс, либо через абсолютное позиционирование