Set div to have its siblings width

Question

I'm looking for a CSS solution to the following:-

<div style="display:inline;">       <div>The content of this div is dynamically created but will always be wider than                the below div.        </div>       <div> Need this div to have the same width as the above div.       </div>  </div>

The wrapper div has an inline display and works as expected, both child divs have dynamically generated content. I need the bottom one to take the width of the previous sibling.

Many thanks for any suggestions in advance.

Answer 1

Here's another Flexbox solution which allows for the second child to wrap to match the width of the variable height sibling.

.wrapper > div {    border: 1px solid;  }    .child {    display: flex;  }    .child div {    flex-grow: 1;    width: 0;  }    .wrapper {    display: inline-block;  }

<div class="wrapper">      <div>This div is dynamically sized based on its content</div>      <div class="child"><div>This div will always be the same width as the preceding div, even if its content is longer (or shorter too).</div></div>  </div>

Edit:

To support multiple divs under .child, where each div is on its own line, add break-after: always; ...

.child div {   flex-grow: 1;   width: 0;   break-after: always; }