CSS - How to have children in different parents the same height?
I have a row with 2 columns. Within these columns I have a headline, content and a list. They have a different content length.
What I want to achieve is, that the list stays next to each other on the same line without breaking the bootstrap mobile optimization.
I first tried it with 3 different rows, but when the columns break, the content doesn't belong to each other anymore. Is there a solution for what I need without JavaScript? Maybe with flexbox somehow?
Here is my current code:
<div class="light-grey-section ruler">
<div class="container">
<div class="row">
<div class="light-section col-xs-12 col-md-6">
<div class="panel panel-default panel-blank">
<div class="panel-body">
<div class="content"> // contentlength is different in each column
<h2>
Lorem ipsum Lorem ipsum
</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
</p>
<p>
Lorem ipsum dolor
</p>
<ul class="check"> // I want this list to stay in the same line with the other ul.check in the other column
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
</ul>
</div>
</div>
</div>
</div>
<div class="dark-section col-xs-12 col-md-6">
<div class="panel panel-default panel-blank">
<div class="panel-body">
<h2>
Lorem ipsum
</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
</p>
<ul class="check">
<li>Lorem ipsum dolor sit amet,</li>
<li>
Lorem ipsum dolor sit amet,
</li>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
To be able to accomplish that without using script, all the items (h2,p,p,ul) needs to see each other, which technically mean they need to be siblings.
And then, for wider screens where they sit side-by-side, they need to be reordered, where the h2 comes first (order: 0) and so on.
I used one media query, but you might want to add more, to match more of Boostrap's break points.
To add i.e. an outer border, you need to use a combination of border-top/border-left/border-right/border-bottom on the elements, which also need to be altered with the query's, to cover both horizontally and vertically stacked items.
Updated codepen
@media (min-width: 768px) {
.content {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.content > * {
flex-basis: calc(50% - 30px);
}
.content h2 { /* 1st row */
order: 0;
}
.content p { /* 2nd row */
order: 1;
}
.content p + p { /* 3rd row */
order: 2;
flex-basis: calc(100% - 30px); /* as only 1 `p` in markup, it need 100% width,
or add an extra empty in the markup */
}
.content ul { /* 4th row */
order: 3;
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="light-grey-section ruler">
<div class="container">
<div class="row">
<div class="light-section col-xs-12">
<div class="content">
<h2>Lorem ipsum Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren
</p>
<p>
Lorem ipsum dolor
</p>
<ul class="check">
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
</ul>
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
</p>
<ul class="check">
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
<li>Lorem ipsum dolor sit amet,</li>
</ul>
</div>
</div>
</div>
</div>
</div>Updated, based on a comment at a duplicate question
If one have many items, one can group them, i.e. 4 per group, to make the CSS much smaller.
Codepen sample
.container {
display: flex;
flex-direction: column;
justify-content: space-around;
}
.container .row {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.container .row>* {
flex-basis: calc(100% - 30px);
min-width: 0;
}
.container .row>div {
border: 2px solid gray;
}
.container .row>div:nth-child(8n+1),
.container .row>div:nth-child(8n+2),
.container .row>div:nth-child(8n+3),
.container .row>div:nth-child(8n+4) {
background: lightgray;
}
.container .row>div:nth-child(4n+1) {
border-width: 2px 2px 0 2px;
margin-top: 10px;
}
.container .row>div:nth-child(4n+2) {
border-width: 0 2px;
}
.container .row>div:nth-child(4n+2)+div {
border-width: 0 2px;
}
.container .row>div:nth-child(4n+4) {
border-width: 0 2px 2px 2px;
}
@media (min-width: 600px) {
.container .row>* {
flex-basis: calc(50% - 30px);
}
.container .row>div:nth-child(4n+1) {
order: 0;
}
.container .row>div:nth-child(4n+2) {
order: 1;
}
.container .row>div:nth-child(4n+2)+div {
order: 2;
}
.container .row>div:nth-child(4n+4) {
order: 3;
}
.container .row>div:nth-child(4n+9) {
order: 4;
}
.container .row>div:nth-child(4n+10) {
order: 5;
}
.container .row>div:nth-child(4n+10)+div {
order: 6;
}
.container .row>div:nth-child(4n+12) {
order: 7;
}
}<div class="container">
<div class="row">
<div><h2>Title 1</h2></div>
<div><p>Test text 1</p></div>
<div><p>Test text 2</p></div>
<div><button>Button</button></div>
<div><h2>Title 2</h2></div>
<div><p>Test text 1 is a bit longer to force it to wrap</p></div>
<div><p>Test text 2</p></div>
<div><button>Button</button></div>
<div><h2>Title 3 is a bit longer to make it wrap</h2></div>
<div><p>Test text 1 is a bit longer to force it to wrap</p></div>
<div><p>Test text 2</p></div>
<div><button>Button</button></div>
<div><h2>Title 4</h2></div>
<div><p>Test text 1</p></div>
<div><p>Test text 2 is a bit longer to force it to wrap</p></div>
<div><button>Button</button></div>
</div>
<div class="row">
<div><h2>Title 5</h2></div>
<div><p>Test text 1</p></div>
<div><p>Test text 2</p></div>
<div><button>Button</button></div>
<div><h2>Title 6</h2></div>
<div><p>Test text 1 is a bit longer to force it to wrap</p></div>
<div><p>Test text 2</p></div>
<div><button>Button</button></div>
<div><h2>Title 7 is a bit longer to make it wrap</h2></div>
<div><p>Test text 1 is a bit longer to force it to wrap</p></div>
<div><p>Test text 2</p></div>
<div><button>Button</button></div>
<div><h2>Title 8</h2></div>
<div><p>Test text 1</p></div>
<div><p>Test text 2 is a bit longer to force it to wrap</p></div>
<div><button>Button</button></div>
</div>
</div>