Auto height not working on text based div in HTML

Question

I know this must be a very simple question but I am having trouble in auto adjusting the height of text based div. Basically I am displaying two horizontal divs in a row. One is text based and the other is image based. Image based div is always auto adjusting its height but text based div is not auto resizing its height accordingly. May be it is because of the padding I have added but don't know how to adjust it according to different screen resolutions. Please find the below two screenshots for better understanding.

Desktop View:

Mobile or Tablet View:

Below is the code for reference:

<style>
.container {
    display:block;  
    width:100%;
}

#custom-section2 .left, #custom-section2 .right {
    float: left;
    width: 50%;
}

#custom-section2 .left {    
    background-color: #F7E3EC; 
    height: 464.67px;   
}
#custom-section2 .right {
    background-color: #FFF;     
}
.section2-with-text1{
    padding-top: 15%;
    font-size: 2vw;
    font-family: 'Arial';
    letter-spacing: 0.1em;
}
.section2-with-text2{
    padding-top: 5%;
    font-size: 1.4vw;
    font-family: 'Arial';
}
.section2-with-text3{
    padding-top: 15%;
}
.section2-with-text3 .button {
    background-color: #000;
    border: none;
    color: white;
    padding: 8px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
    display:inline-block;
}
.img-style{
    height: auto;
}
@media only screen and (min-width:1901px) {
    #custom-section2 .right img{
        height: 660px;
    }
    #custom-section2 .left{
        height: 660px;
    }
}
@media only screen and (max-width:1900) {
    #custom-section2 .right img{
        height: auto;
    }
    #custom-section2 .left{
        height: auto;
    }
}
#custom-section2 .right img{
    width: 100%;
}

</style>
<div class="container" id="custom-section2">
    <div class="right">
        <img src="https://cdn.shopify.com/s/files/1/2200/5487/files/Rectangle_8.jpg?v=1582366707" class="img-style" alt="">
    </div>
    <div class="left">
        <div class="section2-with-text1"><center>TEETH WHITENING KITS</center></div>
        <div class="section2-with-text2"><center>Get that insta-famous smile, from the convenience <br> from your home. Formulated with whitening <br> ingredients previously only available at your dentist.</center></div>
        <div class="section2-with-text3"><center><button class="button">SHOP NOW</button></center></div>
    </div>
</div>

Please suggest a possible solution. I would be grateful.

Thank you

Answer 1

Instead of using float to horizontally align your elements, it would be much easier to use display: flex;

Using flex will keep the left and right elements the same height.

Also note: You'll need to remove the height: 464.67px; declaration in #custom-section2 .left and remove float: left; from #custom-section2 .left, #custom-section2 .right.

(see all my comments in the CSS code)

Like so: (run code snippet)

.container {
    display:block;  
    width:100%;
}

#custom-section2 {
    display: flex; /*Add this!*/
}

#custom-section2 .left, #custom-section2 .right {
    width: 50%;
    /*float: left;*/ /*remove this!*/
}

#custom-section2 .left {    
    background-color: #F7E3EC;
    /*height: 464.67px;*/ /*Remove this!*/
}
#custom-section2 .right {
    background-color: #FFF;     
}

.section2-with-text1{
    padding-top: 15%;
    font-size: 2vw;
    font-family: 'Arial';
    letter-spacing: 0.1em;
}
.section2-with-text2{
    padding-top: 5%;
    font-size: 1.4vw;
    font-family: 'Arial';
}
.section2-with-text3{
    padding-top: 15%;
}
.section2-with-text3 .button {
    background-color: #000;
    border: none;
    color: white;
    padding: 8px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
    display:block;
}

/*.img-style{
    height: auto;
}/*

/* You can remove all this: */
/*@media only screen and (min-width:1901px) {
    #custom-section2 .right img{
        height: 660px;
    }
    #custom-section2 .left{
        height: 660px;
    }
}
@media only screen and (max-width:1900) {
    #custom-section2 .right img{
        height: auto;
    }
    #custom-section2 .left{
        height: auto;
    }
}*/
#custom-section2 .right img{
    width: 100%;
    height: auto; /*Add this!*/
    display: block; /*Add this!*/
}

<div class="container" id="custom-section2">
    <div class="right">
        <img src="https://cdn.shopify.com/s/files/1/2200/5487/files/Rectangle_8.jpg?v=1582366707" class="img-style" alt="">
    </div>
    <div class="left">
        <div class="section2-with-text1"><center>TEETH WHITENING KITS</center></div>
        <div class="section2-with-text2"><center>Get that insta-famous smile, from the convenience <br> from your home. Formulated with whitening <br> ingredients previously only available at your dentist.</center></div>
        <div class="section2-with-text3"><center><button class="button">SHOP NOW</button></center></div>
    </div>
</div>