My template looks like this:
https://i.sstatic.net/hoLzR.jpg
I am trying to keep the same height between each item in both columns, where the height is determined by the tallest item in each column when they are placed side by side. But on smaller screens with a width of 100%, I want each div to have its own height based on its content.
The desired outcome is as follows:
https://i.sstatic.net/WJOVd.jpg
I believe using display: table could work, but I need both columns to be responsive.
I have searched for solutions regarding maintaining equal heights in columns and already implemented flexbox for that purpose.
Is it possible to achieve what I want using only CSS?
EDIT: Added code snippet. It's worth noting that the solution needs to be compatible with Chrome 36 (Android L WebView).
The first answer to this question demonstrates what I aim to accomplish, although display:subgrid is not supported by any version of Chrome currently:
Align child elements of different blocks
.title {
background: #b6fac0;
}
.content {
background: #b6b6fa;
}
.footer {
background: #f7f5b5;
}
.col-50 {
border: 1px solid red;
}<link href="http://code.ionicframework.com/1.3.3/css/ionic.min.css" rel="stylesheet" />
<ion-content>
<div class="row responsive-sm">
<div class="col-50">
<div class="padding title">
Very long title goes here </div>
<div class="padding content">
Content text goes here.
</div>
<div class="padding footer">
Footer
</div>
</div>
<div class="col-50">
<div class="padding title">
Title </div>
<div class="padding content">
Another block of content text.
</div>
<div class="padding footer">
Footer
</div>
</div>
</div>
</ion-content>