How do I make div same height as img beside it?

Question

I need help making a div the same height as the img beside it in the same flex row

here is the html

`<div class="about">
     <img class="headshot" src="../img/headshot.jpg">
     <div class="textbox">here is where my text is</div>
 <div>`

I want the .textbox to be the same size height & width of the .headshot. So far, I have the width the same, but I can't get the height to be the same.

Here is the css:

`.about {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
}

.headshot {
    max-height: auto;
    max-width: 25%;
}

.textbox {
    background-color: hotpink;
    width: 25%;
    height: auto;
}`

I'm sure this is some simple solution, but I've been struggling with it for a bit, so any help is greatly appreciated! :)

Answer 1

Try setting height:100% for "textbox" class.