I used inline grid to create rows on two spans inside a paragraph. That wasy they would be children of the paragraph parent and not be affected by the grid applied to the parent. Sounds complicated, but quite simple. Here's the two code snippets.

 .font-callout {
        display: inline-grid;
        grid-template-rows: 1fr 2fr;
        margin: 0;
        padding: 0.5em;
      }

      .font-callout > span:first-of-type {
        grid-row: 1 / 2;
      }

      .font-callout > span:last-of-type {
        grid-row: 2 / 3;
      }

footer {
  display: grid;
  grid-area: footer;
  grid-gap: 1vw;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

• Roboto Font layout
• Code on Github