Make width of all elements equal based on widest one

Question

This behaviour can be achieved using tables, like with this code:

<style>
table {
    table-layout:fixed;
    width:100%;
}
td {border:1px solid red;}
</style>
<table>
<tr>
    <td>Hello</td>
    <td>WWWWWWWWWWWWWWWWWWWWWW</td>
</tr>
</table>

Output of this will be as i want:

|Hello               |WWWWWWWWWWWWWWWWWWWWWW|

But this solution does not wraps elements inside (in this case tds) to new line if it does not fit to screen width! So i would like to do this using divs and css. If i use:

<style>
#eq > div {
    width: 400px;
    float: left;
}
</style>
<div id="eq">
    <div>Hello</div>
    <div>WWWWWWWWWWWWWWWWWWWWWW</div>
</div>

Sure it works and outputs same, but of course text and number of elements inside #eq are variable! So if text "WWWWWWWWWWWWWWWWWWWWWW" will be changed to "lol", elements will be absurdly wide. On the other side, if i change it to longer text then defined width, width of all other smaller elements will be smaller. So final question is: How can i make width of all elements be as wide as widest element with ability to wrap using pure html & css and without manually specifying width?

Answer 1

Tables will be the easier option. Have you tried forcing wrap on table cells?

td {
  word-wrap: break-word;
}

I don't think there is a pure CSS/HTML solution to your DIV idea.