How to make to divs next to each other with the same width of the biggest content in CSS

If I have two div elements next to each other, how can I make them have the same width as the div with the biggest content?

The following image shows what I want to achieve:

It should be done with CSS only. Not with JavaScript

#wrapper {
  display: flex;
  background-color: Gray;
}

#one {
  width: 100%;
  background-color: green
}

#two {
  width: 100%;
  background-color: blue
}

<div id="wrapper">
  <div id="one">Aaaaaa</div>
  <div id="two">a</div>
</div>

How to make to divs next to each other with the same width of the biggest content in CSS

0 Answers