Как выровнять элемент по дочернему элементу с помощью CSS?

Question

Вот основная html-структура, которую я использую:

<main>
    <article>
        <header></header>
        <div class="article-content"></div>
    </article>
</main>
<aside>
    <div class="aside-content"></div>
</aside>

Используя Bootstrap 4, я позиционирую основной раздел и сторонний элемент рядом:

<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>

, что даетмне это:

Однако я бы хотел, чтобы содержимое боковой панели начиналось с той же точки, что и содержимое статьи, то есть под заголовкомчасть, как это:

Но мне нужно сохранить базовую структуру HTML, которая была в начале. Суть в том, что элемент aside должен оставаться вне элемента main , но его содержимое должно начинаться ниже элемента header (который является дочерним элементом элемента main).

Достаточно легко добиться этого с помощью jQuery, узнав вычисленную высоту заголовка, а затем установите его в качестве верхнего отступа в стороне.

Возможно ли достичь этого только с помощью CSS?

Answer 1

Можете ли вы изменить HTML так, чтобы заголовок находился в другой строке?Если это так, вы можете добавить еще одну строку сверху с заголовком, содержащим .col-md-8, чтобы он распространялся так же широко, как и содержимое статьи.

Вот 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>