Left aligning items in a column grid with each other - html

Question

Have a section id="contact" where I am trying to put a heading and a brief one sentence description underneath in one column and an email submit form with a submit button under the input field in the right column. I want the email input element to reach across the entirety of the right column and have the button left aligned to it's edge underneath it. I have a sketch to show what I am looking for attached.
So far this section does everything I want it to do right now, however the top elements under the bottom elements are not left edge aligning although the class items .latest-from-here .input-email (nested inside the parent section #contact) are justify-self:start; align-self: center;.
https://codepen.io/holmedw/pen/KrvJEb
Sketch:
#contact {
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: left;
grid-column-gap: 80px;
margin-left: 80px;
margin-right: 80px;
height: 480px;
align-items:center;
}
.latest-from-here .input-email {
position:relative;
z-index: -1;
justify-self:start;
align-self: center;
}

Answer 1

if you removed justify-items: left; in #contact and added width:100% to your input field that will solve the problem.
*{
box-sizing:border-box
}
#contact {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 80px;
margin-left: 80px;
margin-right: 80px;
height: 480px;
align-items:center;
}
.latest-from-here .input-email {
position:relative;
z-index: -1;
justify-self:start;
align-self: center;
}
.email{
width:100%
}
<section id="contact">
<div class="latest-from-here">
<h2>Get the latest from Aer</h2>
<p>Don't miss out on new arrivals, offers and events.</p>
</div>
<div class="input-email">
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input name="email" id="email" type="email" placeholder="Enter your email" class="email" required/>
<div></div>
<input id="submit" type="submit" value="Submit" class="btn-submit"></input>
</form>
</div>
</section>