Baseline-Aligned Headings in Columns

Question

I'm having a difficult time coming up with CSS to style columns with baseline-aligned headings as in the below image. The difficulty comes mainly from needing the headings in each column bottom-aligned with dynamic content (e.g. the "Heading Two" heading has whitespace to align with the baseline of the longer first heading).

There are plenty of ways to "cheat" this with tables or improperly ordered markup, but finding a way to style proper markup that responsively reflows into single columns (as in the second image) has proven difficult.

I'd like to create this with markup such as:

  <dl>
    <dt>Heading 1</dt>
    <dd>Body 1</dd>
    <dd>Footer 1</dd>
    <dt>Heading 2</dt>
    <dd>Body 2</dd>
    <dd>Footer 2</dd>
  </dl>

I suspect a solution will require wrappers around the "dictionary terms" such as:

  <dl>
    <div>
      <dt>Heading 1</dt>
      <dd>Body 1</dd>
      <dd>Footer 1</dd>
    </div>
    <div>
      <dt>Heading 2</dt>
      <dd>Body 2</dd>
      <dd>Footer 2</dd>
    </div>
  </dl>

which is fine, and swapping out the entirely for divs would be acceptable as well.

I do have a solution using grid layout and explicitly setting rows and columns on each element, but this seems like a more complicated solution than needed.