I like how this layout turned out. What is a simple grid offers visual interest.

View the layout

Code sample

 <style type="text/css">
      body {
        font-family: 'Merriweather', serif;
        display: grid;
        grid-template-columns: 1fr, 4fr;
        grid-template-areas:
          "header caption"
          "image image"
          "text text";
        grid-column-gap: 2vw;
        grid-row-gap: 1vh;
        margin: 5vw;
      }

      @media (min-width: 48em) {
        body {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-template-areas:
            "image image header"
            "caption text text";
          grid-column-gap: 0px;
          grid-row-gap: 1vh;
          margin: 5vw;
        }
      }

      header {
        grid-area: header;
        align-self: end;
      }

      header {
        color: #333;
        padding-left: 1em;
      }

      header h1 {
        margin: 0;
        line-height: 1.2;
      }

      header p {
        margin: 1em 0;
        font-style: italic;
      }

      figure {
        display: contents;
      }

      img {
        grid-area: image;
        max-height: 100%;
        object-fit: cover;
        width: 100%;
      }

      figcaption {
        grid-area: caption;
        padding: 1em 1.2em 1em 0;
      }

      article {
        grid-area: text;
      }

      article p:first-of-type::first-letter {
        font-size: 200%;
        line-height: 1;
      }

    </style>