I'm having trouble aligning two grid elements next to each other. What I want is for the heading, paragraph, and bottom links to be in one grid element and the image to be in another. When I tried using grid-template-columns: 1fr 2fr;, one element got pushed up while the other was pushed down:
.items {
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 1.5rem;
}<main id="about" class="container">
<div id="cardio" class="items">
<h2>Program 1</h2>
<h1><a href="#cardio">Cardio</a></h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam consequuntur exercitationem dolores ut, sunt eius recusandae ad saepe molestias dolorum accusantium consectetur nostrum inventore facilis voluptate rem eveniet tempora repudiandae
nihil adipisci mollitia minus maxime labore! Eos facere, distinctio, fugit laboriosam voluptas cumque exercitationem maxime vitae reprehenderit omnis accusantium nam.</p>
<div class="underline"></div>
<h1><a href="#strength">Strength</a></h1>
<div class="underline"></div>
<h1><a href="#flexibility">Flexibility</a></h1>
<div class="underline"></div>
<h1><a href="#yoga">Yoga</a></h1>
<div id="cardio-image">
<img src="img/Cardio.png" />
</div>
</div>
</main>