How to position VueJS components

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>