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

<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%;}

}

<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;
}