set div width according to largest div

Question

I have a group of 5 divs, all with auto width.

The text will be inserted dynamically into each div and I want to change all divs width to the largest of the 5.

Any ideas?

.box {
  display: inline-block;
  border: 1px solid #eaeaea;
}

<div class="box">Hi</div>
<div class="box">Hi John</div>
<div class="box">Hello John</div>
<div class="box">Hello John Doe</div>

I think I should be using JS, but I'm wondering if it's possible to avoid it.

Imagine it, they'll change. Otherwise, provide us with some code you've written so that we can see and understand rather than imagine. — DjaouadNM, Sep 28 '17 at 19:47
Please include a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) with the code that you have already tried yourself. This isn't a coding or tutoring service. Questions should show **evidence of research and attempts to solve the problem yourself**, a clear outline of your specific coding-related issue, and the relevant code. See: [How do I ask a good question](https://stackoverflow.com/help/how-to-ask). — FluffyKitten, Sep 28 '17 at 19:48
... probably a duplicate of https://stackoverflow.com/questions/42656183/how-to-set-flex-items-to-equal-width-according-to-the-item-with-the-longest-cont/42659167 unless you want to stack them ... — G-Cyrillus, Sep 28 '17 at 19:58
both situations ? media querie maybe ? https://codepen.io/gc-nomade/pen/dVWEpe please clarify the question ... amount of box per rows, when should it wrap into columns only if that is the both situation you mean, .... — G-Cyrillus, Sep 28 '17 at 20:14

score 0 · Answer 1 · answered Sep 28 '17 at 21:00

I would use javascript:

function setWidth(e,w) {
    e.setAttribute("style","width:"+ w +"px");
    e.style.width= w +'px';
}
var boxes = document.getElementsByClassName("box");
var max = 0;
for (var i = 0; i < boxes.length; i++) {
    var width = boxes[i].clientWidth;
    if (width > max) max = width;
}
for (var i = 0; i < boxes.length; i++) {
    setWidth(boxes[i],max);
}

set div width according to largest div

1 Answers1