templates – Not so common HTML transition to wordpress issue

This is one possibility most of the time:

<div class="wrap">
    <header></header>
    <main></main>
    <footer></footer>
</div>

But my design is like this where wrap has a flex, and the sidebar and main are horizontally positioned. →

<div class="wrap">
    <section class="sidebar">
        <header></header>
        <footer></footer>
    </section>
    <main></main>
</div>

Here header and footer are one after another in the sidebar and the main content is in another container.
How should I transfer this HTML into WordPress? I am facing a mental obstacle.