side by side codeblocks and outputs

1 ::::{.column-screen-insert}

1.1 Syntax

::::{.columns .column-screen-insert .column-screen}

::: column
```python
print('left column')
```
:::

::: column
```python
print('right column')
```
:::

::::

1.2 Example

left column

import plotly.express as px
df = px.data.iris() # iris is a pandas DataFrame
fig = px.scatter(df, x="sepal_width", y="sepal_length")
fig.show()

right column

import plotly.express as px
data_canada = px.data.gapminder().query("country == 'Canada'")
fig = px.bar(data_canada, x='year', y='pop')
fig.show()

---

2 :::{layout-ncol='3'}

2.1 Syntax

::::{.column-screen}
:::{layout-ncol="3"}

```python
print('a')
```

```python
print('b')
```

```python
print('c')
```

:::
::::

2.2 Example

print('a')
print('b')
print('c')

a

b

c

---

3 ::::{.columns} and :::{.column width="30%"}

3.1 Syntax

::::{.columns .column-screen}

:::{.column width="30%"}
```python
print('a')
```
:::

:::{.column width="40%"}
```python
print('b')
```
:::

:::{.column width="30%"}
```python
print('c')
```
:::

::::

3.2 Example

print('a')

a

print('b')

b

print('c')

c

---

4 Ref

• https://stackoverflow.com/a/74544808/2559693
• https://github.com/quarto-dev/quarto-cli/issues/8179