title: Auto height not working on text based div in HTML
body: <p>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.</p>
  
  <p>Desktop View:
  <a href="https://i.stack.imgur.com/uaGHZ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uaGHZ.jpg" alt="enter image description here"></a></p>
  
  <p>Mobile or Tablet View:
  <a href="https://i.stack.imgur.com/BRn1n.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BRn1n.png" alt="enter image description here"></a></p>
  
  <p>Below is the code for reference:</p>
  
  <pre><code>&lt;style&gt;
  .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%;
  }
  
  &lt;/style&gt;
  &lt;div class="container" id="custom-section2"&gt;
      &lt;div class="right"&gt;
          &lt;img src="https://cdn.shopify.com/s/files/1/2200/5487/files/Rectangle_8.jpg?v=1582366707" class="img-style" alt=""&gt;
      &lt;/div&gt;
      &lt;div class="left"&gt;
          &lt;div class="section2-with-text1"&gt;&lt;center&gt;TEETH WHITENING KITS&lt;/center&gt;&lt;/div&gt;
          &lt;div class="section2-with-text2"&gt;&lt;center&gt;Get that insta-famous smile, from the convenience &lt;br&gt; from your home. Formulated with whitening &lt;br&gt; ingredients previously only available at your dentist.&lt;/center&gt;&lt;/div&gt;
          &lt;div class="section2-with-text3"&gt;&lt;center&gt;&lt;button class="button"&gt;SHOP NOW&lt;/button&gt;&lt;/center&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Please suggest a possible solution. I would be grateful.</p>
  
  <p>Thank you</p>