Controlling height of adjacent column in css grid - css

Question

I have a job site designed with with css grid. The job listings and email subscribe are divided bygrid-template-columns: (3fr, 1fr), the problem is is that the email subscribe box is the same height as the job listings (if there are 10 listings for example this is quite a large email subscribe box), how can I change this? (Note: jsfiddle included at bottom will make it much more clear and I have tried to set a height value on #item2 and this did not work) Thanks in advance!
.grid {
display: grid;
grid-template-columns: 3fr 1fr;
}
#item1 {
margin-left: 15px;
}
#item1>h1 {
text-align: center;
}
#list_of_jobs {
list-style: none;
}
#item2 {
text-align: center;
margin-right: 15px;
border: 3px solid #eeeeee;
}
<div class="grid">
<div id="item1">
<h1>Jobs in 10529</h1>
<table>
<tbody>
<div>
<ul id="list_of_jobs">
<li>
<h2>Job 1</h2>
<p class="lead"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque minus corporis earum consequuntur unde saepe consequatur commodi harum ut. </p>
</li>
<li>
<h2>Job 2</h2>
<p class="lead"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque minus corporis earum consequuntur unde saepe consequatur commodi harum ut. </p>
</li>
<li>
<h2>Job 3</h2>
<p class="lead"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque minus corporis earum consequuntur unde saepe consequatur commodi harum ut. </p>
</li>
<li>
<h2>Job 4</h2>
<p class="lead"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque minus corporis earum consequuntur unde saepe consequatur commodi harum ut. </p>
</li>
</ul>
</div>
</tbody>
</table>
</div>
<div id="item2">
<form>
<p>Subscribe to recieve job alerts near 105</p>
<!-- query stores zip code-->
<input type="text" placeholder="Email">
<button class="btn" type="submit">Subscribe</button>
</form>
</div>
</div>
<!-- close grid div-->
http://jsfiddle.net/bmy0s93k/2/

Answer 1

Add this to your code:
#item2 {
align-self: start;
}
revised fiddle
A default setting in a grid container (like in a flex container) is align-items: stretch. This means that grid items (like flex items) will stretch the full length of the relevant axis in the container.
You need to override the default.
References:
§ 6.2. Block/Cross-Axis Alignment: the align-self property
How to disable equal height columns in Flexbox?