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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.8/jquery.inputmask.min.js