Друзья, всем привет. Подскажите пожалуйста. Есть макет, я верстаю на flex-боксах. Как можно сделать текст на блоке формы? Flex не дает растянуть ее наверх.
HTML
<div class="header-form">
<h1>Заборы, калитки, ворота<br>
«ПОД КЛЮЧ»</h1>
<form action="#" class="form-offer">
<input type="name" placeholder="Ваше имя">
<input type="tel" placeholder="+375( )___-___-___">
<input type="submit" value ="Связаться">
</form>
</div>
CSS
.header-form{
display: flex;
flex-direction: column;
align-items: center;
}
.header-form h1{
font-size:230%;
text-transform: uppercase;
color:#ffffff;
z-index: 2;
text-align:center;
line-height: 40px;
font-weight: bold;
}
.form-offer{
flex-basis:100%;
display:flex;
flex-direction: column;
background-color: #4d5665;
padding: 7% 7% 4% 7%;
justify-content: flex-end;
}
.form-offer input{
margin-bottom:5%;
text-transform: uppercase;
font-weight: bold;
font-size: 70%;
padding:10px;
}
.form-offer input[type="submit"]{
background-color: #d5b58e;
border: 1px solid #d5b58e;
border-radius: 3px;
height: 12%;
}