Match text width to dynamically sized images/titles: a step-by-step guide

Question

See this code pen: https://codepen.io/allen-houng/pen/XGMjMr?editors=1100#0

    <div>
      <img src="https://res.cloudinary.com/djcpf0lmv/image/upload/v1549372650/Templates/yoga.jpg" data-radium="true" style=";">
      <div class="description">
        Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum   venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.
      </div>
    </div>

I have a parent div and two child divs - an image and a description. I resize the image based on the viewport height, which means the width will be dynamic and responsive. How do I resize the corresponding sibling div .description to match the width of the image without JavaScript?

In other words, how do I transform:

Enter this:

Answer 1

You can simply set the width of the image to 100%. Just add "width:100%;" into your img style tag to test like this:

  
  

    Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.
  

Or put it into a class:

.img-full {
  display: block;
  width: 100%;
}

  
  

    Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.
  

"display: block" simply ensures that your img is always in it's own block, regardless of width. That is, your text won't appear next to it, only below or above it.

Answer 2

Set the container to inline-block (or any shrink configuration like table, inline-grid, inline-flex , float, absolute, etc.), then force the text width to phpcnc phpcn0 so the width of the container is defined by the image (the text does not affect the width), then use min -width again forces width to 100%

.parent {
  background: pink;
  display:inline-block;
}

img {
  display: block;
  max-height: 70vh;
}

.description {
  width:0;
  min-width:100%;
}

    
  

    Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum   venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.