How can I make an element be next to multiple other elements while sharing a parent container?

I have an unknown amount of elements and next to them they need to have an element always next to them like this:

╔═══════╦═══╗
║		║	║
╠═══════╣	║
║		║	║
╠═══════╣	║
║		║	║
╠═══════╣	║
║		║	║
╚═══════╩═══╝

They can't be two separate containers, my CSS is already quite complex and I'm working with other people as well so it would be quite difficult to change it everywhere.

I tried setting grid-row on the right element to 1 / -1, but you can only use negative values if you have explicity set grid-template-rows, but I don't know how many columns there are.

Something else I tried was using a CSS counter to set either grid-row-end: counter(count) or setting grid-template-rows: repeat(counter(count), auto), but it doesn't output a number.

What can I do? Should I just make it be two separate containers? Using JavaScript is not a great solution either.

Edit: a strange solution that isn't very reliable, but should work in most situations assuming the rest of the layout is known, you can set grid-column: 1 / span 99. I tried doing 1 / 99 before but this is better and doesn't create new rows.

Solution 1: With two containers

You can achieve the same output using flexbox. You can split your container into two columns left and right, and the split your left container into four smaller containers. I added an example bellow with fixed dimensions just for referencing. Hope that helps.

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

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

.container {
  max-width: 500px;
  width: 100%;
  height: 1000px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  padding: 20px;
}

.left, .right {
  height: 100%;
  border: 1px solid red;
  padding: 10px;
}

.right {
    width: 30%;
}

.left {
  width: 70%;
  display: flex;
  flex-direction: column;
}

.row {
  width: 100%;
  height: 250px;
  margin: 5px 0;
}

.first-row {
  border: 1px solid blue;
}

.second-row {
  border: 1px solid green;
}

.third-row {
  border: 1px solid purple;
}
.fourth-row {
  border: 1px solid orange;
}

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

<div class="container">
  <div class="left">
    <div class="row first-row"></div>
    <div class="row second-row"></div>
    <div class="row third-row"></div>
    <div class="row fourth-row"></div>
  </div>
  <div class="right"></div>
</div>

<!-- end snippet -->

Solution 2: With One container (Not recommended)

You can achieve that also with one container but I do not recommend it because as you say you the boxes on the left will be dynamic. Here is any example but with fixed elements and fixed heights.

I would suggestion switching to two separate containers since it is a more clear layout for what you want to achieve.

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

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

.container { 
    max-width: 500px;
    width: 100%;
    height: 1200px;
    border: 1px solid black;
    display: flex;
    align-items: center;
    padding: 20px;
    flex-direction: column;
    flex-wrap: wrap;
}

.row {
    width: 70%;
    height: 240px;
    margin: 5px 0;
    float: left;
}

.fifth-row {
    margin: 5px;
    height: 100%;
    width: 30%;
    border: 1px solid red;
}

.first-row {
    border: 1px solid blue;
 }

.second-row {
    border: 1px solid green;
}

.third-row {
    border: 1px solid purple;
}

.fourth-row {
    border: 1px solid orange;
}

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

<div class="container">
    <div class="row first-row"></div>
    <div class="row second-row"></div>
    <div class="row third-row"></div>
    <div class="row fourth-row"></div>
    <div class="fifth-row"></div>
</div>

<!-- end snippet -->