Occupy width from sibling of parent with CSS

As per HTML5 tag semantics, I designed a web page. A basic structure of the HTML body is as follows

<nav class="nav-primary">
 <div class="heading-primary">
   <!-- Logo & links of webpage -->
 </div>
 <div class="nav-side">
   <!-- Left side navigation of the page -->
 </div>
</nav>
<section class="section-content">
  <!-- Contents of the web page -->
</section>

The end website should have a standard look as follows

I thought of semantics and wrote the left navigation panel (.nav-primary > .nav-side) inside the 'nav' element.

Is there any method by which I can structure the left navigation panel to take up a certain percent of width of section content (.section-content).

Like, I don't want the left navigation panel to be placed above the section content (using fixed position or something). It has to be placed left of the section content sharing the total width using the same HTML structure.

Thanks in Advance

You can combine the use of CSS-grid and display:contents (https://caniuse.com/#feat=css-display-contents) to achieve this by keeping the same HTML structure:

body {
  margin:0;
  height:100vh;
  display:grid;
  grid-template-rows: 50px 1fr;
  grid-template-columns: 100px 1fr;
  grid-template-areas: 
    "header header"
    "side content";
}
nav.nav-primary {
  display:contents;
}
.heading-primary {
  grid-area:header;
  background:red;
}
.nav-side {
  grid-area:side;
  background:blue;
}
.section-content {
  grid-area:content;
  background:green;
}

<body>
  <nav class="nav-primary">
    <div class="heading-primary">
      <!-- Logo & links of webpage -->
    </div>
    <div class="nav-side">
      <!-- Left side navigation of the page -->
    </div>
  </nav>
  <section class="section-content">
    <!-- Contents of the web page -->
  </section>
</body>