<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.