How to make all divs the same width as their narrowset sibling

Question

How do I make all divs the same width as its narrowest sibling.

Eg: I have a:

<div class="wrapper">
  <div class="div1">Hello</div>
  <div class="div2">Hello this s some text</div>
</div>

Here I want to make the div2 element the same width as its narrowest sibling (div1) without changing the HTML part.

and you want to do it without changeing the class of div1 to div 2 ? — Dolev Dublon, Nov 21 '20 at 14:48
are those div side by side or on top of each others?. Your question is unclear about that :) ... is there only 2 of them ... — G-Cyrillus, Nov 21 '20 at 15:47
@G-Cyrillus I have them in default (top-to-bottom) manner, and at-least 5-6 of them, but including them is out of the scope. — Just Mohit, May 30 '21 at 11:49
okay, is this something alike : https://jsfiddle.net/uykar2cb/ you try to do ? — G-Cyrillus, May 30 '21 at 17:37

score 2 · Answer 1 · answered Nov 21 '20 at 14:53

If you want to apply the css style only to the elements that have "div" keyword in their classname like "div1","div23" or "super_div" and which are child of "wrapper" class then you can use this css selector.

.wrapper [class*="div"] {
  width="100%"
}

<div class="wrapper">
    <div class="div">Hello</div>
    <div class="div">Hello this s some text</div>
</div>

score 1 · Answer 2 · edited May 31 '21 at 08:22

1

Try using this CSS:

.div1 {
    width: 100%;
}
.div2 {
    width: 100%;
}

<div class="wrapper">
    <div class="div1">Hello</div>
    <div class="div2">Hello this s some text</div>
</div>

edited May 31 '21 at 08:22

Just Mohit

141
1
13

answered Nov 21 '20 at 14:47

VeryBadCoder

66
5

How to make all divs the same width as their narrowset sibling

2 Answers2