multiple siblings not showing correctly in slot 🐛

**To Reproduce** 👨‍🔬
Consider a component trying to wrap the [css grid module](https://www.w3schools.com/css/css_grid.asp):
```

component MyGrid:
  n: int = 3
  stretch: float = 1.0
  `template`:
    tDiv(fmt"flex: {self.stretch} 0 0; display: grid; grid-template-columns: repeat({self.n}, 1fr); grid-gap: 2%;grid-auto-rows: auto;"):
      slot
```
Then in the app, compare the display using the component and a tDiv with matching css:
```
        component MyGrid(n=3,stretch=1.0):
          tDiv: "a"
          tDiv: "b"
          tDiv: "c"
        tDiv(style = fmt"flex: 1.0 0 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 2%;grid-auto-rows: auto;"):
          tDiv: "d"
          tDiv: "e"
          tDiv: "f"

```

**Expected behavior** 🤔
Results should be the same. The grid environment should break up the width of the page into 3 columns and put 1 item in each column.

**Screenshots** 🖼
Actual results:
![image](https://github.com/HapticX/happyx/assets/126020181/0d2a3ea4-c5cb-44a1-a2c6-3c216bf375fb)


