<form action="" method="GET" name="form">
<label><span>Name</span><input type="text" name="first_name" placeholder="First Name" autocomplete="on" required>
</label>
<hr>
<label><span>Phone</span><input type="tel" placeholder="+7(___)___-__-__" name="phone" autocomplete="on" required>
</label>
<hr>
<div class="text-right">
<button type="submit">Отправить</button>
</div>
</form>
:root {
--form-max: 350px;
--span-max: 50px;
}
html,
body {
min-height: 100vh;
}
.text-right {
text-align: right;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
form {
width: 100%;
max-width: var(--form-max);
margin-left: auto;
margin-right: auto;
overflow: hidden;
> label {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
> span {
width: 100%;
max-width: var(--span-max);
padding-right: 10px;
.text-right();
}
> input {
flex: 1;
}
}
}
View Compiled
!(function($){
$phone = $("form input[type=tel]");
$phone.inputmask({"mask": "+7(999)999-99-99"});
})(jQuery);
This Pen doesn't use any external CSS resources.