Lets say I have multiple elements (div or span) that are either display: block or display: inline-block. I want them to all be the same size, but stretched to fit the content of the largest. I know this can be accomplished with JavaScript, but are there pure HTML/CSS options available?
Example:
-----------------------
| Content A |
-----------------------
-----------------------
| Content B Is Longer |
-----------------------
But, if Content B were even longer, they would look like:
----------------------------------------
| Content A Is Now Even Longer Than B |
----------------------------------------
----------------------------------------
| Content B Is Shorter |
----------------------------------------
It will work if you give them
width: 100%;and wrap them in a container withdisplay: inline-block;. Example: http://jsbin.com/ocifar/1/edit