Я пытаюсь сверстать по заданию. Требование по заданию использовать flex и fieldset. Понимаю, что мне приходится скрывать этот fieldset, я думаю, что он какую-то разметку дает и возможность задать заголовок через label.
Ниже изображения макета.
Вот так получилось у меня:
.reserve__bottom-list {
display: flex;
justify-content: space-around;
}
.reserve__list-bottom-double {
padding-top: 22px;
}
.reserve__list-bottom {
list-style: none;
}
.reserve__item-bottom input {
height: 52px;
}
.reserve__name {
width: 292px;
}
.reserve__list-bottom input:focus {
outline: none;
border: #CD06FF 2px solid;
}
.reserve__list-bottom input:active {
outline: none;
border: 2px #CD06FF solid;
}
.reserve__name-bottom {
font-size: 14px;
line-height: 16px;
}
.reserve__name-double {
height: 52px;
margin-bottom: 36px;
}
.reserve__item-left {
margin-right: 26px;
}
.reserve__name-double {
width: 126px;
}
.reserve__name-solo {
width: 292px;
}
.reserve__fieldset-right {
display: flex;
}
.reserve__button-bottom {
color: #6C0287;
padding: 16px 50px;
font-size: 22px;
font-weight: bold;
line-height: 28px;
border-radius: 10px;
}
<fieldset class="reserve__fieldset reserve__bottom-list">
<fieldset class="reserve__fieldset reserve__fieldset-left">
<ul class="reserve__list-bottom reserve__list-bottom-double">
<li class="reserve__item-bottom reserve__item-bottom-double">
<input class="reserve__name-double reserve__item-left" type="number" name="date" min="1" max="31" placeholder="Дата">
<input class="reserve__name-double reserve__item-right" type="number" name="time" min="9" max="20" step="1" placeholder="Время">
</li>
<li class="reserve__item-bottom">
<input class="reserve__name-solo" type="number" name="people" placeholder="Сколько человек" min="1" max="">
</li>
</ul>
</fieldset>
<fieldset class="reserve__fieldset reserve__fieldset-right">
<ul class="reserve__list-bottom">
<li class="reserve__item-bottom">
<label class="reserve__name-bottom" for="name">Имя</label>
<input class="reserve__name" type="name" name="name" required>
<label class="reserve__name-bottom" for="second_name">Фамилия</label>
<input class="reserve__name" type="name" name="second_name">
</li>
</ul>
<ul class="reserve__list-bottom">
<li class="reserve__item-bottom">
<label class="reserve__name-bottom" for="tel">Телефон</label>
<input class="reserve__name" type="tel" name="tel" required>
<label class="reserve__name-bottom" for="email">E-mail</label>
<input class="reserve__name" type="email" name="email" required>
</li>
<li class="reserve__item-bottom">
<button class="reserve__button-bottom" value="order">ЗАБРОНИРОВАТЬ</button>
</li>
</ul>
</fieldset>
</fieldset>