I need to organize my content into three columns using Flexbox, similar to pricing plans.
However, the challenge is that each column contains multiple rows of text with varying lengths. Is there a way to ensure that all rows in each column have the same height?
<div class="outer">
<div class="column">
<div class="text">Some text</div>
<div class="text">Some text</div>
<div class="text">Some text more than</div>
<div class="text">Some text</div>
<div class="text">Some text</div>
<div class="text">Some text more than</div>
<div class="text">Some text</div>
<div class="text">Some text</div>
<div class="text">Some text more than</div>
</div>
<div class="column">
<div class="text">Some text</div>
<div class="text">Some text</div>
<div class="text">Some text others</div>
<div class="text">Some text</div>
<div class="text">Some text</div>
<div class="text">Some text more than</div>
<div class="text">Some text</div>
<div class="text">Some text</div>
<div class="text">Some text more than</div>
</div>
<div class="column">
<div class="text">Some text</div>
<div class="text">Some text</div>
<div class="text">Some text</div>
<div class="text">Some text</div>
<div class="text">Some text</div>
<div class="text">Some text more than dsd sdsd d d</div>
<div class="text">Some text</div>
<div class="text">Some text</div>
<div class="text">Some text more than</div>
</div>
</div>
.outer {
display: flex;
height: 700px;
}
.column {
display: flex;
algin-items: stretch;
margin-right: 15px;
background-color: green;
flex-direction: column;
}
.text {
background: red;
width: 50px;
margin: 5px;
}
Although I cannot utilize CSS grid, I still want to achieve a structure similar to the example provided. This means ensuring that all rows in each column have the same height but are enclosed within different "column" wrappers.