Need help getting this image to align right

Question

I'm trying to get the image on the right to be anchored to the bottom of the blue section, and for it to dynamically resize to fill the right column but never be cropped. Like this:

I've tried placing it as an image in html or as a background in css, but the image doesn't stay vertically anchored as planned. The bottom either overflows or floats above the bottom edge, depending on window width. Below >600, I want the text to be full-width and for the image to appear below it with a max height of 25%. Can anyone help out?

 <div class="landing">
        
        <div class="introcopy"> 
                <br>
                <h1>Header</h1>
                <br>
                <p>Welcome to my portfolio...</p>
                <br>
                <br>
        </div>
        <div class="landingimage"> 
            <img src="img/pink.png">
        </div>
    </div>  



.landing {
    min-height: 90%; 
    background-color: #a2c2d4; 
    padding-left: 4%; 
    padding-right: 4%; 
    padding-top: 2%; 
    }

.introcopy {
    text-align: left;
    float: left;
    padding-top: 10%;
    padding-right: 10%;
    max-width: 70%; }

.landingimage {
    float: left;
    width: 30%;
    overflow: hidden;}

@media max-width: 600px {
    .introcopy {
    width: 100%;
    float: none; }
}   

Answer 1

Here is my go at how I would try to achieve what you are looking for, I used a mobile first approach for my version of the code. I made use of Flexbox to achieve the desired image anchored to the bottom of the .landing div requirement and as for the sizing you can probably play around with that to your liking.

HTML

 <div class="landing">
   <div class="introcopy">
     <h1>Bring Joy</h1>
     <p>Welcome to my portfolio...</p>
   </div>
   <div class="imageDiv">
     <img src="img/pink.png" class="landingimage" />
   </div>
 </div>

The HTML code is mostly the same with some minor differences to the div containing the image. I also removed the line break tags as you could achieve the desired spacing through some additional CSS which would clean up the HTML code a bit more.

CSS

body, html {
    padding: 0;
    margin: 0;
    height: 100%;
}

.landing {
    background-color: #a2c2d4;
    display: flex;
    align-items: center;
    height: 70%;
    flex-direction: column;
}

.introcopy {
    text-align: left;
    width: 100%;
    height: 50%;
}

.introcopy > h1, p { /* Use something like this for manipulating the h1 and p tags individually */
    padding-left: 80px;
    width: 60%;
}

.imageDiv {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
}

.landingimage {
    height: 25vh;
    align-self: end;
}

@media (min-width: 600px) {
    .landing {
        flex-direction: row;
    }

    .landingimage {
        height: 60vh;
    }
}

I hope this helps!