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.

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

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 your div to display:inline-block instead, this way your div will expand with the content inside of it.

http://jsfiddle.net/CpKDX/

2021 keep it simple...

Use grid and the fractional unit? Then you can split up into as many equally sized rows or columns as you want:

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 1em;
}

.container > div {
  border: 1px solid black;
  padding: 0.5em;
}

<div class="container">
  <div>I'm a part of a grid. I will be split up into equal parts with my other sibling(s) depending on how many columns the grid is given.</div>
  <div>I am a sibling element.</div>
</div>

UPDATE: This works with me, I've just tried it:

<div style="max-width:980px;border:1px solid red;">
   <div style="background:#EEE;float:left;">
     <div style="width:auto;border:1px solid blue;float:left;">If you use 100% here, it will fit to the width of the mother div automatically.</div>
     <div style="border:1px solid green;"> The div will be 100% of the mother div too.</div>
   </div>
     <div style="clear:both;"></div>
</div>

Is this what you want? The borders and background are just to show the divs ;)

---

Just go like this:

Let's say you want the whole divs be max. 980px (otherwise just leave that out or replace with 100%)...

<div style="max-width:980px;">
     <div style="width:100%;">If you use 100% here, it will fit to the width of the mother div automatically.
     </div>
     <div style="width:100%;"> The div will be 100% of the mother div too.
     </div>
</div>

The second option would be, to use one more div... or you use style="width:auto;" for the dynamic div...

Here is still a flexbox-based approach.

The essential idea: in an outermost wrapper, elements that need to be of equal width are wrapped into another wrapper.

.wrapper {
  display: inline-block;
}

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

.demo-bar {
  height: 4px;
  background-color: deepskyblue;
}

<div class="wrapper">
  <div class="flex-wrapper">
    <div contenteditable>Some editable text.</div>
    <div class="demo-bar"></div>
  </div>
</div>

Another practical example: an adaptive progress bar with the same width below a media (video or audio) element.

video.addEventListener("timeupdate", () =>
  progress.style.width = `${video.currentTime / video.duration * 100}%`
)

.wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
}

video {
  display: block;
  max-width: 100%;
}

.progress-bar {
  height: 0.25rem;
  background: #555;
}

#progress {
  width: 0%;
  height: 100%;
  background-color: #595;
}

<div class="wrapper">
  <div data-css-role="wrapper">
    <video id="video" controls>
      <source src="https://raw.githubusercontent.com/mdn/interactive-examples/master/live-examples/media/cc0-videos/flower.webm">
    </video>
    <div class="progress-bar">
      <div id="progress"></div>
    </div>
  </div>
</div>

Not sure if I understood what you are trying to do, but looks like setting a 100% width to the last div should work:

<div style="width:100%;"> 

BTW the style in the first div is not well defined, you should use a colon instead of a equal sign in the properties definition:

<div style="display:inline;">

If your willing to give up on a couple of <div>s then I have the solution for you:

<div style=“display: inline-block;”>
  <table>
    <tr>
      <td>The table automatically makes its siblings the same width</td>
    </tr>
    <tr>
      <td>So this will be as wide</td>
    </tr>
  </table>
</div>

Remember to set the div display:inline-block;