Align right column to left

Have this simple grid. And I would like to know if is there any way to align right column to start from left ? Because now both start from middle of grid. Left column is ok, but right no. Is there any easy way to make it ? Or I need to have another grid ? Wanna hold it simple, but not sure if it's possible

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
.contact {
  display: grid;
  
  font-family:  sans-serif;
}
.contacts{
    display: grid;
    justify-content: end;
}
.contact h2 {
  grid-column: 1/3;
  
 
  margin: 0;
  font-size: 1.2em;
}
.contact h2 span {
  display: inline-block;
  padding: 10px;
}
.contact label {
  grid-column: 1/3;
 font-weight: bold;

  padding: 5px 10px 5px 10px;
  font-size: 1em;
  margin: 10px 10px 0 10px;
}
.contact input[type=text],
.contact input[type=email],
.contact input[type=tel],
.contact textarea {
  grid-column: 1/10;
  font-family: sans-serif;
 
  margin: 0 10px 0px 10px;
  font-weight: 400;
  font-size: 1em;
  padding: 0.2em;
}
.contact textarea {
  margin-bottom: 10px;
  min-height: 80px;
}
.contact input[type=submit] {
  
 
  border: 0;
 
  border-radius: 0.5em;
  font-size: 1.1em;
  padding: 5px 30px 5px 30px;
  justify-self: start;
  align-self: start;
  margin: 0 10px 10px 10px;
  grid-row: 11/12;
}
.contact input[type=submit]:hover, .contact input[type=submit]:active {
  position: relative;
  top: 2px;
}
.contact p {
  grid-column: 1/3;
 
  margin: 0 10px 10px 10px;
  padding: 5px 10px 5px 10px;

  font-size: 0.85em;
}


@media only screen and (min-width: 762px) {
  .contact {
    
    grid-template-rows: repeat(10, auto);
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
  }
  .contacts {

    grid-template-rows: repeat(10, auto);
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
  }
  .wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .contact h2 {
  
    grid-column: 1/13;
  }
  .contact h2 span {
    
    padding: 10px 10px 10px 10px;
    display: inline-block;
    min-width: calc(50% - 20px);
    text-align: center;
  }
  .contact label {
    grid-column: 3/5;
    margin: 0;
    margin-left: 10px;
    text-align: right;
  }
  .contacts h2 {
   
    grid-column: 1/13;
  }
  .contacts h2 span {
    background: #3a3a3a;
    padding: 10px 10px 10px 10px;
    display: inline-block;
    min-width: calc(50% - 20px);
    text-align: center;
  }
  .contacts label {
    grid-column: 1/2;
    margin: 0;
    margin-left: 10px;
    text-align: right;
  }
.contact input[type=text],
.contact input[type=email],
.contact input[type=tel],
.contact input[type=submit],
.contact textarea {
    grid-column: 5/13;
    margin: 0;
    margin-right: 10px;
  }
  .contact textarea {
    grid-row: 5/9;
  }
  .contact p {
    grid-column: 3/12;
    margin: 0;
    
    background-color: #3a3a3a;
    color: #fff;
  }
  .contacts p {
    grid-column: 1/7;
    margin: 0;
    
    background-color: #3a3a3a;
    color: #fff;
  }
  .contact input[type=submit] {
    grid-column: 5/13;
    grid-row: 10/11;
    margin-bottom: 10px;
  }
}
.right {
    grid-column: 1/3;
}
    </style>
</head>
<body>
    <div class="wrapper">
        
        <div class="contact">
            <p>Text</p>
            <label for="name">Text</label>
            <input type="text" name="name"  id="name" VALUE="Text" aria-required="true" required>
            <label for="telephone">Text</label>
            <input type="tel" name="telephone"  id="telephone" VALUE="Text">
            <label for="email">Text</label>
            <input type="email" name="email"  id="email" VALUE="Text" aria-required="true" required>
            
            
          </div>
      <div class="contact">
        <p>Text</p>
        <label for="name">Text</label>
        <input type="text" name="name"  id="name" VALUE="Text" aria-required="true" required>
        <label for="telephone">Text</label>
        <input type="tel" name="telephone"  id="telephone" VALUE="Text">
        <label for="email">Text</label>
        <input type="email" name="email"  id="email" VALUE="Text" aria-required="true" required>
        
        
      </div>



    </div>
</body>
</html>

Solution

Flexbox will probably be more apt in this case.

.wrapper{
  display: flex;
  gap: 2rem;
}
.contact{
  flex: 1;
  display: flex;
  flex-direction: column;
}
.contact h3{
  background: orchid;
  padding-block: 0.5em;
  margin-block: 0 0.5em;
}
.info{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: pink;  
}
.contact:nth-of-type(odd) .info{
  align-items: end;
}

<div class="wrapper">
  <div class="contact">
    <h3>Text</h3>

    <div class="info">
      <div class="block">
        <label for="name">Text</label>
        <input type="text" name="name" id="name" VALUE="Text" aria-required="true" required>
      </div>
      <div class="block">
        <label for="telephone">Text</label>
        <input type="tel" name="telephone" id="telephone" VALUE="Text">
      </div>
      <div class="block">
        <label for="email">Text</label>
        <input type="email" name="email" id="email" VALUE="Text" aria-required="true" required>
      </div>
    </div>
  </div>
  <div class="contact">
    <h3>Text</h3>
    <div class="info">
      <div class="block">
        <label for="name">Text</label>
        <input type="text" name="name" id="name" VALUE="Text" aria-required="true" required>
      </div>
      <div class="block">
        <label for="telephone">Text</label>
        <input type="tel" name="telephone" id="telephone" VALUE="Text">
      </div>
      <div class="block">
        <label for="email">Text</label>
        <input type="email" name="email" id="email" VALUE="Text" aria-required="true" required>
      </div>
    </div>
  </div>

</div>