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

Question

[unlik]

Как правильно адаптивно сверстать такой блок?



Проблема с тем, чтобы поля имя и почта совпадали с сообщением по ширине на любых экранах.

Answer 1

[Никита Черемисин]

flex, justify-content: space-between;

Answer 2

[Dymok]

Answer 3

[азаза]

<form class="mainform">
<input placeholder="Имя*">
<input placeholder="Email*">
<br class="clear"/>
<textarea placeholder="Ваше сообщение*"></textarea>
</form>

*{box-sizing:border-box;}
.mainform input{width:49%; float:left; margin:1%; padding:5px 10px;}
.mainform textarea{width:100%; padding:5px 10px; margin:1%;}

}

на ГРИД посоветовал бы делать, но чего то писать впадло

Answer 4

[Пащук Илья]

вот так бро:
https://jsfiddle.net/74enouhz/1/

<form class="form">
	<input class="input" placeholder="Name"></inpu>
		<input class="input"  placeholder="Email"></inpu>
		<textarea class="textarea"  placeholder="Message" name="" id="" cols="30" rows="10"></textarea>
</div>

.form {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;

  padding: 10px;

  background-color: #f6f6f6;

  box-sizing: border-box;
}

.input {
  display: inline-block;
  
  width: calc(50% - 26px);

  margin: 10px;

  border: 2px solid #f24f1d;
}

.textarea {
  flex: 1 1 100%;

  margin: 10px;
}

Comments

[Никита Черемисин]

Блин, ну хотя бы
<form></div>
не надо делать.

Ну и не забываем про префиксы