Flex form

by beliyadm

HTML

<h3>Горизонтально</h3>
<form action="#" class="form form1">                                
	<div class="flex">
  
		<div class="flex_item">
			<label for="#">Ваше имя</label>
			<input class="main-form-input" type="text">
		</div>
		<div class="flex_item">
			<label for="#">Номер телефона</label>
			<input class="main-form-input" type="text">
		</div>
	</div>
</form>                       

<button class="main-form-btn header__btn" type="submit">Оставьте заявку</button>

<h3>Вертикально</h3>
<form action="#" class="form form2">                                
	<div class="flex">
  
		<div class="flex_item">
			<label for="#">Ваше имя</label>
			<input class="main-form-input" type="text">
		</div>
		<div class="flex_item">
			<label for="#">Номер телефона</label>
			<input class="main-form-input" type="text">
		</div>
	</div>
</form>                       

<button class="main-form-btn header__btn" type="submit">Оставьте заявку</button>

CSS

.flex {
  width: 100%;
  display: flex;
  flex-direction: row; justify-content: space-between; flex-wrap: wrap;
  }

.form1 .flex_item {width: 45%;}

.form2 .flex_item {width: 100%;} 
  
  

.form .flex_item {
  position: relative;
}
.form .flex_item label {
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  padding: 0.5rem;
  background-color: #fff;
  font-size: 1.3rem;
  color: #565656;
}
.main-form-input{
  margin-bottom: 2.7rem;
  border: 1px solid #dddddd;
  border-radius: 5px;
  width: 100%;
  padding: 2rem; 
}