Is there a way to make multiple boxes expand dynamically in size when one of them contains more words? Currently, the problem is that only the box with more text expands while the others remain unchanged. I want all the boxes to follow the same size dynamically, regardless of word count.
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: table;
height: 100px;
width: 100%;
background-color: orange;
text-align: center;
border: 2px solid #f69c55;
margin-bottom: 10px;
}
span {
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="div"><span>IN THE MIDDLE OF NOWHERE</span></div>
<div id="div"><span>LIVING HELL OF CSS</span></div>
<div id="div"><span>LIVING HELL OF CSS no matter how many words inside the box itt will not dynamically expand but keep the size of the box at the same size as the rest so this is my stupid test to make sure every keeps within the boundary of the rectangle boxes all the time without exception. In any case it goes out of the box the word will be truncated for whatever stupid reason. Is this a possible scenario that the css can do or not?. So this is the longest words expansion for a test to prove the theory in the head. Or will the word start to squeeze in and fit within the box all the time or will it expand the box to become larger than it should whatever it is man man man. Oh yes now i can see the expansion of the box when the words exceed the length the box can keep within the rectangle size dimension</span></div>
</body>
</html>