I'm working with 2 columns and I want to indicate which column items belong to, while also ensuring that they have the same height.
Here's what I currently have:
https://codepen.io/anon/pen/KyGewd
* {
box-sizing: border-box;
}
.cont {
margin: auto;
width: 500px;
display: flex;
}
.row {
flex-basis: 50%;
align-self: top;
border: 1px solid blue;
}
.item {
background: grey;
padding: 10px;
border: 1px solid green;
}<div class="cont">
<div class="row">
<div class="item">
<h2>Item 1</h2>
<p>Here is short text</p>
</div>
<div class="item">
<h2>Item 2</h2>
<p>Here is short text</p>
</div>
</div>
<div class="row">
<div class="item">
<h2>Item 3</h2>
<p>Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. Here is Longer text. </p>
</div>
</div>
</div>https://i.sstatic.net/8Ms96.jpg
But what I need now is this:
https://i.sstatic.net/qso69.jpg
I don't want to specify a fixed height in pixels since my text content varies and the layout should be responsive (the 500px width set in the code is just for demonstration).
I could use JavaScript to calculate heights and assign a min-height accordingly, but it feels like a hack. Is there a CSS-based solution available?
UPDATE - The provided code example is simplified. In reality, I will have numerous items to arrange into "right" or "left" columns dynamically based on their properties.