<div class="wrapper">
	<div class="container">
		<div class="element">
			<p>Example 1</p>
			<svg width="400" height="250" viewBox="0 0 400 250">
				<rect x="0" y="0" width="400" height="250" fill="#eeeeee" />
				<text x="50" y="50" font-size="16" font-family="Arial">Too bad this doesn't scale right...</text>
			</svg>
		</div>
	</div>
</div>
.wrapper {
	width: 100%;
	height: 100%;
	font-family: Arial;
}

.container {
	max-width: 1000px;
	width: 90%;
}

.element {
	width: 50%;
	background-color: #cccccc;
	padding: 20px;
}

p {
	text-align: center;
	font-size: 24px;
}

svg {
	width: 100%;
}
// For a Medium post
// 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.