<section data-id="example-1">
<p><strong>Example 1:</strong></p>
<p>Width: 50%</p>
<aside>
<p>Width: 50%</p>
</aside>
</section>
<br><br>
<section data-id="example-2">
<p><strong>Example 2:</strong></p>
<p>Width: 50vw</p>
<aside>
<p>Width: 50vw</p>
</aside>
</section>
<br><br>
<section data-id="example-3">
<p><strong>Example 3:</strong></p>
<p>Width: 50vw</p>
<aside>
<p>Width: 25vw</p>
</aside>
</section>
* {
margin: 0;
padding: 0;
}
section {
background-color: pink;
}
aside {
background-color: purple;
}
section[data-id="example-1"] {
width: 50%;
}
section[data-id="example-1"] aside {
width: 50%;
}
section[data-id="example-2"],
section[data-id="example-3"] {
width: 50vw;
}
section[data-id="example-3"] aside {
width: 25vw;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.