CSS/ Flexbox: Same width as largest element, like columns - css

Question

I've built a list component for my app, I can't use tables because of the style.
I want to have the elements inside of the "rows" to have the same width from top to bottom, like columns. The code looks similar to this:
<div class="row">
<div class"element>iPhone </div>
<div class"element>Buy an iPhone now!</div>
</div>
<div class="row">
<div class"element>Airport Express </div>
<div class"element>Buy an Airport Express now!</div>
</div>
<div class="row">
<div class"element>iPad </div>
<div class"element>Buy an iPad now!</div>
</div>
This is what it currently looks like:
And this is, what I want:
Is there a way to do this?

Answer 1

Use CSS tables:
Separation between rows with border-spacing
Borders in cells. You can use border-radius to round them.
Pseudo-element displayed as cell to fill available space at the right
white-space: nowrap to prevent cells from shrinking due to the pseudo-element.
.wrapper {
display: table;
border-spacing: 0 10px;
}
.row {
display: table-row;
border: 1px solid;
}
.row::after {
content: '';
display: table-cell;
width: 100%;
border: 1px #6AACC9;
border-style: solid none;
}
.element {
display: table-cell;
border: 1px solid #6AACC9;
border-right-color: #adadad;
border-left-style: none;
padding: 5px;
white-space: nowrap;
}
.element:first-child {
border-left-style: solid;
border-radius: 5px 0 0 5px;
}
<div class="wrapper">
<div class="row">
<div class="element">iPhone </div>
<div class="element">Buy an iPhone now!</div>
</div>
<div class="row">
<div class="element">Airport Express </div>
<div class="element">Buy an Airport Express now!</div>
</div>
<div class="row">
<div class="element">iPad </div>
<div class="element">Buy an iPad now!</div>
</div>
</div>

Answer 2

You can't do that with flexbox. Dimensions cannot be equallised between elements that do not share a parent.
But you can with CSS Tables
.row {
display: table-row;
}
.element {
display: table-cell;
border: 1px solid grey;
padding: 8px;
}
<div class="row">
<div class="element">iPhone</div>
<div class="element">Buy an iPhone now!</div>
</div>
<div class="row">
<div class="element">Airport Express</div>
<div class="element">Buy an Airport Express now!</div>
</div>
<div class="row">
<div class="element">iPad</div>
<div class="element">Buy an iPad now!</div>
</div>