Как вертикально центрировать изображение ::before относительно контента что бы элемент не обтекало текстом?

Question

[Тимофей]

Надо сделать так что бы в случае добавления контента, картинку не обтекал текст в случае добавления контента и вертикально центрировать.

<section class="block-connect">
            <div class="block-connect__inner">
                <h4>Sign up for out newsletter to receive a handpicked selection of the best stories, recipes, and news,
                    delivered weekly to your inbox.</h4>
                <form class="block-connect__form" action="send">
                    <input type="text">
                    <button type="submit">Subscribe</button>
                </form>
            </div>
        </section>

.block-connect {
  margin-top: 39px;
  padding-left: 18px;
  border-bottom: 1px dashed #E5E5E5;
  border-top: 1px dashed #E5E5E5;
  width: 877px;
  padding-top: 10px;
  padding-bottom: 8px;

  &__inner {
    display: flex;
    width: 876px;
    align-items: center;

    h4 {
      font-family: Arial, serif;
      font-style: italic;
      font-weight: normal;
      font-size: 14px;
      line-height: 16px;
      padding-left: 18px;

      &::before {
        float: left;
        margin: 10px;
        content: "";
        vertical-align: middle;
        width: 37px;
        height: 31px;
        background-repeat: no-repeat;
        display: block;
        background-image: url(https://cdn.icon-icons.com/icons2/2866/PNG/512/yoga_position_pose_icon_181785.png);
      }
    }

    button {
      margin-left: 17px;
      font-size: 10px;
      line-height: 10px;
      padding: 6px 15px 4px;
    }
  }

  &__form {
    padding-left: 21px;
    padding-top: 4px;
    display: flex;

    input {
      width: 157px;
      height: 19px;
    }
  }
}

С моими стилями и имею это

И пример кода в песочнице:

Answer 1

[Юрий]

Сделать блоку левый паддинг, иконку поставить абсолютом:

Comments

[Тимофей]

Благодарю!!))

Answer 2

[henrykurbakov]

Сделай высоту в vh:

&::before {
        float: left;
        margin: 10px;
        content: "";
        vertical-align: middle;
        width: 37px;
        height: 4vh;
        background-repeat: no-repeat;
        display: block;
        background-image: url(https://cdn.icon-icons.com/icons2/2866/PNG/512/yoga_position_pose_icon_181785.png);
      }

Comments

[Тимофей]

Этим он берет себе дополнительную высоту и при добавление контента он не центрируется автоматически, я могу добавить элемент через дополнительный блок и выровнить флексами, но это не очень неправильные решение

[henrykurbakov]

Вот тут похожий вопрос видел, может тебе подойдет: https://ru.stackoverflow.com/questions/565342/%D0%...

[Тимофей]

henrykurbakov, спасибо, мне дали ответ)