Как разместить инпуты формы таким образом?

Question

[kaidos]

Нужно чтобы инпут Телефон и E-Mail были на одной строке как на картинке.

Мой код

Comments

[Ankhena]

- Гридами в два столбца.
- Флексами и заданной шириной

[Дмитрий]

Я бы поместил их в отдельный див, а диву бы задал display: flex

Ну и там бы уже внутри поровнял

Держи flex шпаргалку: https://tpverstak.ru/flex-cheatsheet/

Answer 1

[Андрей Федоров]

https://codepen.io/aliencash/pen/vYWJeVX

Answer 2

[Slowdown1]

<div class="inputs__wrapper">
    <div class="inputs">
        <form action="">
            <input class="input" type="text">
            <input class="input" type="text">
            <input class="input" type="text">
        </form>
    </div>
    <div class="textarea">
        <form action="">
            <textarea class="input" name="" id="" cols="30" rows="10"></textarea>
        </form>
    </div>
</div>

.inputs__wrapper{
    max-width: 1000px;
    margin: 0 auto;
}

form{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    column-gap: 20px;
}

.input{
    min-width: 40%;
    flex-grow: 1;
    margin-top: 20px;
}

Comments

[Ankhena]

Это что за жжжуть? Это самое мягкое слово, которое я смогла придумать.

[red-web]

Ankhena, а в чем жуть?

[Ankhena]

red-web, разбить форму на две и наделать ещё кучу оберток.

Когда даже эти два инпута не нужно вместе оборачивать для достижения результата.

[red-web]

red-web, Ankhena, Хотя да жуть@red-web,

[Slowdown1]

Ахахахахаххахахвхах.
Я такое решение видел на сайте google.