<!-- https://qna.habr.com/q/817579 -->
<div class="wrapper">
	<div class="articles">
		<div class="articles__item"></div>
		<div class="articles__item"></div>
		<div class="articles__item"></div>
		<div class="articles__item"></div>
		<div class="articles__item"></div>
		<div class="articles__item"></div>
		<div class="articles__item"></div>
		<div class="articles__item"></div>
	</div>
	<div class="sidebar">
		<div class="sidebar__sticky">
			<div class="sidebar__item"></div>
			<div class="sidebar__item sidebar__item--alt"></div>
		</div>
	</div>
</div>
:root {
  --gap: 30px;
}
.wrapper {
	display:flex;
	flex-flow:row nowrap;
	justify-content:space-around
}
.articles {
	width:60%
}
.articles__item {
	background-color:#FFF;
	border-radius:12px;
	min-height:20vh;
	margin-bottom:var(--gap)
}
.sidebar {
	width:25%;
	padding-bottom:var(--gap);
}
.sidebar__sticky {
	top:0;
	position:sticky;
}
.sidebar__item {
	background-color:rgba(255,255,255,.5);
	border-radius:12px;
	min-height:30vh;
	margin-bottom:var(--gap)
}
.sidebar__item--alt {
	min-height:10vh;
	background-color:rgba(255,255,255,.3);
}

/* HELPERS */
* {
	box-sizing:border-box;
}
html {
	padding:0;
	margin:0;
	height:100%;
	background-color:#121212;
}
body {
	padding-bottom:100vh /* add more scroll */
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.