Автоматическая высота не работает на основе текста в div в HTML

Question

Я знаю, что это, должно быть, очень простой вопрос, но у меня проблемы с автоматической настройкой высоты текста на основе div В основном я показываю два горизонтальных деления подряд. Один основан на тексте, а другой - на основе изображений. Div на основе изображения всегда автоматически регулирует его высоту, но div на основе текста не изменяет его высоту соответственно. Может быть, это из-за заполнения, которое я добавил, но не знаю, как настроить его в соответствии с различными разрешениями экрана. Ниже приведены два снимка экрана для лучшего понимания.

Вид рабочего стола:

Вид с мобильного телефона или планшета:

Ниже приведен код для справки:

<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>

Пожалуйста, предложите возможное решение. Буду благодарен.

Спасибо

Answer 1

Вместо использования float для горизонтального выравнивания ваших элементов было бы намного проще использовать display: flex;

Использование flex будет поддерживать левый и правый элементы одинаковой высоты.

Также обратите внимание: вам нужно удалить объявление height: 464.67px; в #custom-section2 .left и удалить float: left; из #custom-section2 .left, #custom-section2 .right.

(см. Все мои комментарии в коде CSS)

Примерно так: (фрагмент кода запуска)

.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>