<div class="container">
<div class="col-1">
1/3 box
</div>
<div class="col-2">
2/3 box
</div>
</div>
.container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 1rem;
}
.col-1 {
}
.col-2 {
}
/* Base styles: */
body {
margin-inline: 2rem;
font-size: 130%;
font-family: sans-serif;
background: #f2f0ec;
color: #2e2c08;
}
.container {
max-width: 50rem;
border: #2e2c08 dotted 5px;
padding: 1rem;
}
[class^="col-"] {
border: #2e2c08 solid 5px;
padding: 1rem;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.