Нужно разместить блоки как на скрине

Question

Помогите пожалуйста разместить блоки как на скрине?

<section class="connectUs">
  <h1 class="sectionTitle sectionTitleConnectUs">
    Связаться с нами
  </h1>
  <form class="connectUsForm">
    <input class="checkoutOption" placeholder="Имя" type="text">
    <input class="checkoutOption" placeholder="Номер телефона" type="number">
    <input class="checkoutOption" placeholder="E-mail" type="text">
    <input class="checkoutOption" placeholder="Интересующий товар / услуга" type="text">
    <textarea class="checkoutOption checkoutOptionTextarea" placeholder="Сообещние"></textarea>
  </form>
  <a class="privacyPolicy" href="#">
                Отправляя заявку вы соглашаетесь с политикой кофиденциальности
            </a>
  <button class="sendButton">Отправить</button>
  <img class="connectUsImage" src="img/connectUs.png">
</section>

Answer 1

Например, можно с помощью гридов:

form {
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: 20px;
  row-gap: 10px;
}

img {
  grid-column: 2 / 3;
  grid-row: 1 / 6;
  background-color: #eee;
}

input,
textarea,
a,
button {
  grid-column: 1 / 2;
}

<section class="connectUs">
  <h1 class="sectionTitle sectionTitleConnectUs">Связаться с нами</h1>
  <form class="connectUsForm">
    <img class="connectUsImage" src="img/connectUs.png">
    <input class="checkoutOption" placeholder="Имя" type="text">
    <input class="checkoutOption" placeholder="Номер телефона" type="number">
    <input class="checkoutOption" placeholder="E-mail" type="text">
    <input class="checkoutOption" placeholder="Интересующий товар / услуга" type="text">
    <textarea class="checkoutOption checkoutOptionTextarea" placeholder="Сообещние"></textarea>
    <a class="privacyPolicy" href="#">Отправляя заявку вы соглашаетесь с политикой кофиденциальности</a>
    <button class="sendButton" type="submit">Отправить</button>
  </form>
</section>

БЛОГ НА HUSL

Нужно разместить блоки как на скрине

Ответы (1 шт):