<section>
    <h1>My Awesome Blog</h1>
    <article>
        <h2>Title #1</h2>
        <p>Ingress #1</p>
    </article>
    <article>
        <h2>A title that spans multiple lines</h2>
        <p>Ingress #2</p>
    </article>
    <article>
        <h2>Title #3</h2>
        <p>Ingress #3</p>
    </article>
    <article>
        <h2>Title #4</h2>
        <p>Ingress #4</p>
    </article>
</section>
section {
  margin: 0 auto;
  max-width: 350px;
  display: grid;
  grid-gap: 10px;
  grid-auto-flow: dense;
  grid-template-rows: repeat(2, 1fr);
}

h1 {
  grid-column: 1 / span 2;
}

article {
  display: contents;
}

article:nth-child(even) h2,
article:nth-child(even) p {
  grid-column: 1;
}

article:nth-child(odd) h2,
article:nth-child(odd) p {
  grid-column: 2;
}

h1, h2, p {
  margin: 0;
  border: 1px solid black;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.