Jak wyrównać wysokość div'ów.

Question

Hej, tworzę sobie stronkę i mam taki malutki problem, bardziej przemyślenie.
Czy jest jakiś sprytny sposób na to aby ten złoty blok był tej samej wielkości co obrazek.
Albo jak zrobić aby te dwa bloki (zdjęcie i blok z tekstem) były równej wielkości.

 

HTML:

<section class="offertShort">
    <div class="container">
        <header><h2>OFERTA</h2></header>
        <div class="content">
            <div class="imageOffer">
                <img src="link/to/img" alt="">
            </div>
            <div class="textAboutOffer">
                <div class="offerBlock">
                    <h3>OFERTA TAŃCÓW</h3>
                    <p>Download and install the app from play store or app store. The app will guide you through the configuration process. Live support is available to help you.</p>
                </div>
                <div class="offerBlock">
                    <h3>OFERTA DODATKOWA</h3>
                    <p>Connect the device anywhere your home and turn it on. Then follow the guide given by the app to configure. Make sure your home WiFi is working well.</p>
                </div>
                <div class="offerBlock">
                    <h3>WYNAJĘCIE SALI</h3>
                    <p>After the configuration process is completed as per the app guide, you will be able to control your home applicance from anywhere remotely.</p>
                </div>
            </div>
        </div>
    </div>
</section>

SCSS:
 

.offertShort{
    background-color: $main-dark;
    color: $main-white;
    padding: 10rem 0rem;
    .content{
        display: flex;
        justify-content: center;
        align-items: center;
        
        .imageOffer{
            flex: 1 1 20rem;
            overflow: hidden;

            img{
                width: 400px !important;
                max-width: none;
                height: 700px;
                object-fit: cover;
            }
        }
        .textAboutOffer{
            flex: 2 1 40rem;
            padding: 0rem 2rem;
            position: relative;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            .offerBlock{
                padding: 3rem 2rem;
                background-color: $gold-sand;
                color: $main-dark;
                cursor: pointer;
                transition: all 0.3s ease;
                &:hover{
                    background-color: $main-gold;
                }

            }
        }
    }
}

Dziękuję za każdą sugestię.

Answer 1

Najprościej będzie wrzucić jedno i drugie do jakiegoś kontenera i wtedy obrazek i ten blok z tekstem height 100%