Выровняйте левые элементы на левой стороне и правые элементы на правой стороне

Question

Я работаю над формой в формате html и применил к ней flexbox, левые элементы (компания, электронная почта) правильно выровнены по левому краю, но не по правым сторонам (имя и телефон). Как я могу выровнять левый столбец моей сетки вправо?

Спасибо за ваше время !!

Вот что у меня есть:

.contact form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 1rem;
  background: red;
}

.contact form label {
  display: block;
  font-size: 15px;
  margin-bottom: 5px;
}

.contact form p {
  margin: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.contact form .full {
  grid-column: 1 / 3;
}

.contact form textarea {
  width: 100%;
}

.contact input {
  width: 80%;
  height: 2rem;
  border: 0.5px solid rgb(167, 156, 156);
}

.contact input::-webkit-input-placeholder {
  font-size: 12px;
  text-indent: 5px;
}

form .contact-to {
  width: 100%;
  height: 2rem;
}

<div class="contact">
  <form action="" class="form">
    <p class="full">
      <label for="">Contact to</label>
      <select class="contact-to" name="request-type">
        <option value="candidates">Looking for candidates</option>
        <option value="job">Looking for a job</option>
        <option value="collaboration">Working with Asia-HR</option>
        <option value="other">Other</option>
      </select>
    </p>
    <p>
      <label for="">Company</label>
      <input type="text" name="company" placeholder="enter the name of your company">
    </p>
    <p>
      <label for="">Name*</label>
      <input type="text" name="name" placeholder="enter your name">
    </p>
    <p>
      <label for="">Email*</label>
      <input type="email" name="name" placeholder="enter your email">
    </p>
    <p>
      <Label>Phone</Label>
      <input type="phone" name="name" placeholder="enter your phone number">
    </p>
    <p class="full">
      <label for="Your message">Your message*</label>
      <textarea name="message" id="" cols="30" rows="10"></textarea>
    </p>
    <p class="full">
      <input type="file" name="document">
    </p>
    <p class="full">
      <button>Submit</button>

    </p>
  </form>
</div>

Answer 1

Установите grid-column-gap на пробел между столбцами и измените ширину ввода на 100%:

.contact form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 1rem;
  background: red;
  grid-column-gap: 10%;
}

.contact form label {
  display: block;
  font-size: 15px;
  margin-bottom: 5px;
}

.contact form p {
  margin: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.contact form .full {
  grid-column: 1 / 3;
}

.contact form textarea {
  width: 100%;
}

.contact input {
  width: 100%;
  height: 2rem;
  border: 0.5px solid rgb(167, 156, 156);
}

.contact input::-webkit-input-placeholder {
  font-size: 12px;
  text-indent: 5px;
}

form .contact-to {
  width: 100%;
  height: 2rem;
}

<div class="contact">
  <form action="" class="form">
    <p class="full">
      <label for="">Contact to</label>
      <select class="contact-to" name="request-type">
        <option value="candidates">Looking for candidates</option>
        <option value="job">Looking for a job</option>
        <option value="collaboration">Working with Asia-HR</option>
        <option value="other">Other</option>
      </select>
    </p>
    <p>
      <label for="">Company</label>
      <input type="text" name="company" placeholder="enter the name of your company">
    </p>
    <p>
      <label for="">Name*</label>
      <input type="text" name="name" placeholder="enter your name">
    </p>
    <p>
      <label for="">Email*</label>
      <input type="email" name="name" placeholder="enter your email">
    </p>
    <p>
      <Label>Phone</Label>
      <input type="phone" name="name" placeholder="enter your phone number">
    </p>
    <p class="full">
      <label for="Your message">Your message*</label>
      <textarea name="message" id="" cols="30" rows="10"></textarea>
    </p>
    <p class="full">
      <input type="file" name="document">
    </p>
    <p class="full">
      <button>Submit</button>

    </p>
  </form>
</div>

Answer 2

Вы можете использовать медиазапросы CSS @media для создания сетки столбцов. Затем просто вызовите соответствующую сетку столбцов, используя атрибут class в вашем коде HTML.

* {
 box-sizing: border-box;
}

.row::after {
   content: "";
   clear: both;
   display: table;
 }

[class*="col-"] {
  float: left;
  padding: 15px;
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

<div class="row">
  <div class="col-8 col-s-9">
    <p>Some Text ...</p>
  </div>

  <div class="col-4 col-s-3">
    <p>Some Text ...</p>
  </div>   
</div>