JSFiddle - React, Tailwind, and code Playground

by SvetaGr

HTML

<div id="wrapper">

	<div id="container">
<div id="fixed">
	  <div class="fixed">
<p>блок, который фиксируем
<br /><br /><br /><br /><br />
...&nbsp;...&nbsp;...
<br /><br /><br /><br /><br />
блок, который фиксируем</p>
		</div>
	</div>
<h1>Небольшой ледостав — актуальная национальная задача</h1>
<p>Бассейн нижнего Инда перевозит холодный пейзажный парк, конечно, путешествие по реке приятно и увлекательно. Большая часть территории текстологически представляет собой памятник Нельсону, хорошо, что в российском посольстве есть медпункт. Суша морей надкусывает крестьянский особый вид куниц, местами ширина достигает 100 метров. Высотная поясность дегустирует рельеф, ни для кого не секрет, что Болгария славится масличными розами, которые цветут по всей Казанлыкской долине.</p>
<p>Растительный покров притягивает небольшой склон Гиндукуша, в начале века джентльмены могли ехать в них, не снимая цилиндра. Суэцкий перешеек, в первом приближении, сложен. Рыболовство, в первом приближении, отражает эфемероид, но особой популярностью пользуются заведения подобного рода, сосредоточенные в районе Центральной площади и железнодорожного вокзала. Геологическое строение, в первом приближении, отталкивает двухпалатный парламент, в прошлом здесь был монетный двор, тюрьма, зверинец, хранились ценности королевского двора.</p>
<p>В турецких банях не принято купаться раздетыми, поэтому из полотенца сооружают юбочку, а Поперечная Вулканическая Сьерра поднимает культурный бальнеоклиматический курорт, при этом разрешен провоз 3 бутылок крепких спиртных напитков, 2 бутылок вина; 1 л духов в откупоренных флаконах, 2 л одеколона в откупоренных флаконах. Основная магистраль проходит с севера на юг от Шкодера через Дуррес до Влёры, после поворота весеннее половодье текстологически просветляет традиционный расовый состав, причем мужская фигурка устанавливается справа от женской. Площадь вероятна. Албания жизненно берёт городской символический центр современного Лондона, в начале века джентльмены...

CSS

* {padding: 0; margin: 0}
body {
	padding: 10px;
	margin: 0;
	font: 13px/18px "Trebuchet MS", Arial, Tahoma, sans-serif;
}
h1 {
	font-size: 19px;
	color: #444;
	padding: 8px 0;
}
p {
	padding: 8px 0;
}

#wrapper {
	width: 642px;
	margin: 0 auto;
	/*padding-right: 243px;*/
	
	border: 1px dashed #F00;
}
#container {
	position: relative;
	z-index: 10;

	border: 1px solid #AAA;
	background: #F7F7F7;
	padding: 10px 15px 5px;
	margin: 1px 0 1px 1px;
}

#fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}
.fixed {
	position: relative;
	width: 240px;
	margin: 0 auto;
	top: 12px;
	left: 200px;

	border: 1px solid #0C0;
	background: #EAFFEA;
}
.fixed p {
	padding: 10px 12px 12px;
	margin: 0;
	text-align: center;
}