Two columns layout in Quarto - text

Question

Quarto
I am creating a website in Quarto and would like to have a two columns layout so I can nicely show text side by side. In streamlit you can use columns to get a two columns layout. Here is an example code of how to layout should look like:
---
title: "Two columns layout Quarto"
format:
html:
code-fold: true
engine: knitr
---
I would like to have text here and here
Sentence becomes longer, it should automatically stay in their column More text
Output:
As you can see the text is combined into one sentence, while I would like to have it separately like a two columns layout. So I was wondering if this is possible in Quarto?
Streamlit
Here is an example in streamlit:
# Package
import streamlit as st
# Function with columns
def txt(a, b):
col1, col2 = st.columns([7,2])
with col1:
st.markdown(a)
with col2:
st.markdown(b)
# Example
st.write('# Example in Streamlit')
txt('I would like to have text here', 'and here')
Output:
As you can see this is nicely shown in two column layout.

Answer 1

You can use pandoc .columns div to create column layout
---
title: "Two columns layout Quarto"
format:
html:
code-fold: true
engine: knitr
---
:::: {.columns}
::: {.column width="70%"}
I would like to have text here
Sentence becomes longer, it should automatically stay in their column
:::
::: {.column width="10%"}
<!-- empty column to create gap -->
:::
::: {.column width="20%"}
and here
More text
:::
::::

Answer 2

Alternatively, you could utilize the bootstrap css grid system for such kind of questions. You would not need an additional empty column to create space, you could change columns gaps easily (see here):
---
title: "Two columns layout Quarto"
format: html
engine: knitr
---
::: {.grid}
::: {.g-col-6}
## First column
I would like to have text here
Sentence becomes longer, it should automatically stay in their column
:::
::: {.g-col-6}
## Second column
and here
More text
:::
:::