Как позиционировать форму внутри блока?

Question

нужно чтобы получилось как на макете. Формы там встали в 2 ряда, я не понимаю как так сделать, подскажите пожалуйста.

css

.footer{
    background: #333333;
}

.container__inner{
    padding: 150px 0;
}

.title__footer-top{
    text-align: center;
    font-family: Open Sans Condensed;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 48px;
    line-height: 65px;
    margin-bottom: 100px;
}

.footer__contacts{
    display: block;

    color: white;
    font-family: Open Sans Condensed;
    font-weight: bold;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.contacts__footer-1{
    margin-bottom: 25px;
}

.contacts__foter-2{
    margin-bottom: 25px;
}

.contacts__foter-3{
    margin-bottom: 25px;
}


.footer__forms-midl{
    position: relative;
    left:400px;
    bottom: 162px;
}
.feedback__input-midll{
    display:inline-block

    
}

.footer__form-name{
    background: #444444;
    border: 1px solid #616161;
    box-sizing: border-box;
    width: 180px;
    height: 35px;

    
}

.footer__form-phone{
    background: #444444;
    border: 1px solid #616161;
    box-sizing: border-box;
    width: 180px;
    height: 35px;
}

.footer__form-company{
    background: #444444;
    border: 1px solid #616161;
    box-sizing: border-box;
    width: 180px;
    height: 35px;
}

.footer__form-email{
    background: #444444;
    border: 1px solid #616161;
    box-sizing: border-box;
    width: 180px;
    height: 35px;
}

html

   <div class="footer">
        <div class="container">
            <div class="container__inner">

                <div class="footer__title">
                    <h1 class="title__footer-top">
                        <div class="about__colortext">стать</div> меценатом
                    </h1>
                </div>

                <div class="footer__contacts">
                    <h3 class="contacts__footer-1">+7 (812) 123-45-55 </h3>
                    <h3 class="contacts__foter-2">+7 (812) 123-45-66 </h3>
                    <h3 class="contacts__foter-3">[email protected]</h3>
                    <h3 class="contacts__foter-4">г. санкт-петербург, невский 140</h3>
                </div>

                <div class="footer__forms-midl">
                    <form class="feedback__input-midl">
                        <input class="footer__form-name" type="text" placeholder="Имя"> 
                        <input class="footer__form-phone" type="text" placeholder="Телефон"> 
                        <input class="footer__form-company" type="text" placeholder="Компания"> 
                        <input class="footer__form-email" type="text" placeholder="E-mail">
                    </form>
                </div>

                <p class="title__footer-bottom">
                    * Ваши данные не будут переданы третьим лицам, 100% <br>
                    вероятность. Конфиденциальность мы гарантируем, и защищаем <br>
                    персональные данные согласно законку ФЗ-52. <br>
                </p>
            </div>
        </div>

        <div class="footer__forms-right">
            <form class="feedback__input-right">
                <input class="footer__form-message" type="text" placeholder="Сообщение">
            </form>
            <button type="submit">
                ОТПРАВИТЬ
            </button>
        </div>
    </div>
</body>

</html>

Answer 1

На гридах можно сделать легко, если старые браузеры более трёхлетней давности не нужны:

form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}

textarea {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}

<form>
  <input type="text" placeholder="1">
  <input type="text" placeholder="2">
  <input type="text" placeholder="3">
  <input type="text" placeholder="4">
  <textarea></textarea>
</form>

БЛОГ НА HUSL

Как позиционировать форму внутри блока?

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