• style.css
  • setup.css
  • index.html
/* Setup styles in the other file. */

aside {
	background-color: gold;
	padding: 10px;
	width: 100px;
	float: left;
	margin-right: 10px;
}

div:nth-child(2) aside {
	float: right;
	margin-right: initial;
	margin-left: 10px;
}
body {
	font-family: sans-serif;
	padding: 20px;
}

div {
	background-color: deepskyblue;
	padding: 10px;
	border-top: solid black 4px;
}

div:not(:first-child) {
	margin-top: 20px;
}
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="../assets/reset.css" rel="stylesheet">
		<link href="setup.css" rel="stylesheet">
		<link href="style.css" rel="stylesheet">
	</head>
	<body>
		<section>
			<div>
				<aside>
					<p>This is an aside element.</p>
				</aside>
				<p>This is some text in the first element. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu risus quis varius quam. Egestas fringilla phasellus faucibus scelerisque eleifend donec. </p>
			</div>
			<div>
				<aside>
						<p>And another aside here too, with a lot more text in it.</p>
				</aside>
				<p>And some more in the second element. Ut etiam sit amet nisl. Sed libero enim sed faucibus turpis in eu. Congue nisi vitae suscipit tellus mauris. Nisi est sit amet facilisis magna etiam tempor orci. Leo urna molestie at elementum. Morbi tristique senectus et netus et malesuada.</p>
			</div>
			<div>
				<p>And a third one, too.</p>
			</div>
		</section>
	</body>
</html>