Seeking a method to create side by side, equal height divs (without resorting to table layout) with a single vertical line separating them. Attempted using flex container per row but the vertical line is fragmented which is not ideal... What would be the optimal solution for this issue?
Desiring a setup resembling the image below:
https://i.sstatic.net/zXD5Z.png
Summary of attempted solutions:
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<style type="text/css>
.flex-container{
display: -webkit-flex; /* Safari */
display: flex; /* Standard syntax */
}
.flex-container .column{
background: #dbdfe5;
width: 100px;
}
.vr {
background: red;
width: 2px;
margin: 0px 5px 0px 5px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="column">R1 - Col1</div>
<div class="vr"></div>
<div class="column bg-alt">R1 - Col2</div>
</div>
<div class="flex-container">
<div class="column">R2 - Col1</div>
<div class="vr"></div>
<div class="column bg-alt">R1 - Col2</div>
</div>
</body>
</html> Note: The number of rows is N and the content in each column is dynamic, determining the row's height based on the tallest content in that row. (No JavaScript allowed!)
Thank you!