html
Collapsible element
<details>
<summary>Some text goes here</summary>
... some more text goes here.
</details>
With the
open
attribute<details open>
the details are unfolded by default.
Minimal 2 column layout
<style>
.grid-2col {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1em
}
.col1 {
grid-column-start: 1;
background-color: red;
padding-left: 1em;
}
.col2 {
grid-column-start: 2;
background-color: green;
padding-left: 1em;
}
</style>
<div class="grid-2col">
<div class="col1">
<p>Some text in the first column.</p>
</div>
<div class="col2">
<p>Some text in the second column.</p>
</div>
</div>