<div class="columns">
<div class="col col-2 col-bg-aqua">
<h2>Section 1 - Col 1</h2>
<p>This is column 1</p>
</div>
<div class="col col-1 col-bg-beige">
<h2>Section 1 - Col 2</h2>
<p>This is column 2</p>
</div>
<div class="col col-1">
<h2>Section 1 - Col 3</h2>
<p>This is column 3</p>
</div>
</div>
.container {
width: 90%;
max-width: 980px;
margin: 0 auto;
}
.columns {
display: flex;
margin: 1em 0;
}
.col-bg-beige {
background-color: beige;
padding: 1em;
}
.col-bg-aqua {
background-color: aqua;
padding: 1em;
}
.col-1 {
width: 25%;
}
.col-2 {
width: 50%;
}
.col-3 {
width: 75%;
}
.col-4 {
width: 100%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.