Set div to have its siblings width

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.

Solution 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;
}

Solution 2:

Floats and tables are so 2000 and late. With today's browsers we can make the two sibling DIVs match each other's width, regardless which is bigger/smaller.

Here's a Flexbox solution fit for 2016:

.wrapper {
  display: inline-block;
}

.parent {
  display: flex;
  flex-direction: column;
}

/* For visualization */
.child {
  border: 1px solid #0EA2E8;
  margin: 2px;
  padding: 1px 5px;
}

<div class="wrapper">
  <div class="parent">
    <div class="child">Child number one</div>
    <div class="child">Child #2</div>
  </div>
</div>

Set div to have its siblings width

Solution 1:

Solution 2:

Related

Recent Posts