HTML Grid Cell with Row Start and Row Span til the end of the grid

I have this grid layout:

The side menu (5, 6, 7, 8) has a dynamic content and can populate to x number of items. I want the main content (9) to span it's row based to the size of the side bar.

I am using tailwind, whenever I try to put row-span-full to the cell 9, it overlaps the tab (2, 3, 4). Meaning to say, It took all the rows even I have indicated the row-start-2.

Here's my code

<div class="grid grid-cols-5 auto-rows-auto gap-4">
    <div class="col-start-2">2</div>
    <div class="col-start-3">3</div>
    <div class="col-start-4">4</div>
    <div class="row-start-2">5</div>
    <div class="col-start-1 row-start-3">6</div>
    <div class="col-start-1 row-start-4">7</div>
    <div class="col-start-1 row-start-5">8</div>
    <div class="col-span-4 col-start-2 row-start-2 [missing class to take up the rest of the row]">9</div>
</div>
    

Is this achievable in HTML Grid? Because this is very easy with flexbox.

It's a limitation of CSS Grid itself, not Tailwind's fault. Here's one workaround:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.grid {
  background-color: darkblue;
}

.grid div:not(:has(>*)) {
  background-color: aquamarine;
  text-align: center;
}

<!-- language: lang-html -->

<script src="https://cdn.tailwindcss.com"></script>
<div class="grid grid-cols-5 auto-rows-auto gap-4">
  <div class="col-start-2">2</div>
  <div class="">3</div>
  <div class="">4</div>
  <div class="side-bar col-start-1 row-start-2 grid grid-cols-1 auto-rows-auto gap-4">
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
  <div class=" col-start-2 col-span-4 row-start-2">9</div>
</div>

<!-- end snippet -->