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.