How to align element to it's sibling's child with CSS? - html

Question

Here's the basic html structure I'm using:
<main>
<article>
<header></header>
<div class="article-content"></div>
</article>
</main>
<aside>
<div class="aside-content"></div>
</aside>
By using Bootstrap 4 I'm positioning main section and aside element side by side:
<div class="row">
<div class="col-md-8">
<main>
<article>
<header></header>
<div class="article-content"></div>
</article>
</main>
</div>
<div class="col-md-4">
<aside>
<div class="aside-content"></div>
</aside>
</div>
</div>
Which gives me this:
However what I'd like to achieve is to make sidebar content start at the same point as article content, i.e. below the header portion, like this:
But I need to maintain the basic HTML structure that was in the beginning. The point is that aside element should remain outside of the main element, but it's content should start below header element (which is a child of main element).
It's fairly easy to achieve this with jQuery, by finding out calculated height of header and then set it as the top padding in aside.
Is it possible to achieve this with just CSS?

Answer 1

Can you modify the html so that the header sits on another row? If so you can add another row on top with just the header in it with a .col-md-8 so that is spreads as wide as the article content.
Here is a jsfiddle
<div class="row">
<div class="col-md-8">
<header><h1>Some long Header of an article</h1></header>
</div>
</div>
<div class="row">
<div class="col-md-8">
<main>
<article>
<div class="article-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu cursus lorem. Duis fermentum erat id ex porttitor, eget sollicitudin lorem blandit. Duis tellus leo, dictum a mauris sed, sollicitudin aliquam enim. Maecenas purus orci, luctus nec orci eu, tempor volutpat tellus. Aliquam pretium lorem justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur sollicitudin nisi ipsum, quis dignissim turpis cursus at. Donec euismod egestas sapien, at dignissim urna eleifend fringilla. Nunc malesuada velit eu nunc faucibus fermentum. Vestibulum tempus in arcu vel posuere. Fusce efficitur pretium dolor, eu condimentum turpis. Nam gravida bibendum sapien nec hendrerit. Proin leo nulla, elementum ut augue sit amet, lobortis efficitur quam.</div>
</article>
</main>
</div>
<div class="col-md-4">
<aside>
<div class="aside-content"><h3>Sidebar</h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
</aside>
</div>
</div>