How to position VueJS components - css

Question

I have a design brief which requires me to move the red component (on the right) to the red frame/shell(on the left).
The two categories/sections comes from a REST-API, with their children in side like that.
[ What i've tried ]
I tried positioning the red component absolute, but the problem was that if the content of the component above it grow. the two components are going to overlap.
I couldn't find exactly where to position it. (in terms on Y axis)
[ What i would like ]
I was hoping that maybe i can use v-slot to create a shell/frame on the left, then i template the component on the right and yield it to the shell/frame on the left side.
Any help would be appreciated.
Thanks in advance.

Answer 1

If I understand you correctly, that's what you need :
// sorry for plain css, I just don't know how insert scss in stackoverflow snippet box
const btn = document.querySelector('button')
const grid = document.querySelector('.grid')
btn.onclick = () => grid.classList.toggle('replaced')
.grid {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 100px 100px;
column-gap: 20px;
row-gap: 20px;
}
div {
background: black;
}
div:nth-child(1) {
order: 10;
}
div:nth-child(2) {
order: 20;
}
div:nth-child(3) {
order: 30;
}
div:nth-child(4) {
order: 40;
background: red;
}
.replaced div:nth-child(4) {
order: 11;
}
<main class="grid replaced">
<div></div>
<div></div>
<div></div>
<div></div>
</main>
<button>toggle</button>