Struggling with `CSS grid` and could do with a bit of help.

I've got a `<section>` item with 4 items, these should be separated 2 on the left, 2 on the right, centered vertically.

However, when my Vue component state variable changes, the items are filtered down to just the two on the right.

How do I keep the correct format of the grid so the two columns stay on the right when there are less items in the grid?

[![basic example of the grid](https://i.stack.imgur.com/sIEiv.png)](https://i.stack.imgur.com/sIEiv.png)

So far I have this for the main outer div...

```css
display: grid;
grid-template-columns: 1fr auto;
grid-column-gap: 1.25em;
align-items: center;

```

and this for my two inner right divs

```
display: grid;
justify-content: right;
align-content: center;

```