Let image size be relative to sibling flex element

How can the height of the image be relative to the height of the elements on the left?

I'm trying to create the following layout:

What I tried

I'm trying to achieve this with flexbox. My html looks like this. I have display:flex on the container <div class="split">. That container houses two children containers: <div class="intro__primary"> and <div class="intro__secondary">. The first has an h1, p and a. The second the img.

I gave both children a width of 48%, and I want my image to occupy as much vertical space as possible, but not more than the height of <div class="intro__primary">.

HTML

<section class="intro">
  <div class="split">
     <div class="intro__primary">
        <h1></h1>
        <p></p>
        <a class="btn"></a>
     </div>
     <div class="intro__secondary">
        <img>
     </div>
</div>

CSS

.split {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.intro__primary {
        width: 48%;
        align-self: flex-start;
}

.intro__secondary {
    width: 48%;
    height: 100%;
    align-self: flex-end;
}

.intro__secondary > img {
    max-width: 100%;
    height: 100%;
}

The code above results in an image that has a way larger height than the container with the text on the left. I played a lot with all the properties but can't fix it. What am I overlooking?