JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
		<div class="row" id="header">
			<div class="span_12"></div>
		</div>
		<div class="row" id="main">
			<div class="span_2">
				<p>Praesent laoreet, turpis id malesuada ultricies, lacus nulla cursus leo, in venenatis dui massa at metus. In scelerisque tempor massa, et iaculis ex feugiat nec. Integer vitae lorem et tellus luctus condimentum. Suspendisse potenti. Integer vitae viverra neque. Praesent at egestas mauris. Pellentesque aliquam vitae tortor sed porta. Nulla facilisi. Morbi venenatis varius gravida. Aenean nec sodales dolor. Integer faucibus lectus felis, at egestas ipsum auctor et.</p>
			</div>
			<div class="span_4"></div>
			<div class="span_6">
				<div id="stickyContainer">
					<div id="stickyBox" class="stickyBox">
						<div id="sticky">Vestibulum vitae dignissim lacus. Morbi lacinia, metus eget aliquet semper, ante nulla convallis ante, vel placerat ipsum tortor eu ipsum. Integer at facilisis ipsum.</div>
					</div>

					<div id="info">Vestibulum vitae dignissim lacus. Morbi lacinia, metus eget aliquet semper, ante nulla convallis ante, vel placerat ipsum tortor eu ipsum. Integer at facilisis ipsum. Etiam vitae massa risus. Phasellus varius maximus neque non aliquam. Sed tincidunt, tortor id venenatis pellentesque, urna tellus ultrices justo, non gravida arcu lorem quis orci.</div>
				</div>
				<div id="stickyContainer">
					<div id="stickyBox" class="stickyBox">
						<div id="sticky">Vestibulum vitae dignissim lacus. Morbi lacinia, metus eget aliquet semper, ante nulla convallis ante, vel placerat ipsum tortor eu ipsum. Integer at facilisis ipsum.</div>
					</div>

					<div id="info">Vestibulum vitae dignissim lacus. Morbi lacinia, metus eget aliquet semper, ante nulla convallis ante, vel placerat ipsum tortor eu ipsum. Integer at facilisis ipsum. Etiam vitae massa risus. Phasellus varius maximus neque non aliquam. Sed tincidunt, tortor id venenatis pellentesque, urna tellus ultrices justo, non gravida arcu...

CSS

body {
		margin: 0;
		padding: 0;
	}
	
	.content {
		max-width: 1080px;
		margin: 0 auto;
	}
	.row {
		font-size: 0;
		display: block;
		width: calc(100% + 30px);
		margin-left: -30px;
	}
	.span_2, .span_4, .span_6, .span_12 {
		margin-left: 30px;
		display: inline-block;
		font-size: 14px;
		box-sizing: border-box;
		vertical-align: top;
		position: relative;
		overflow: hidden;
	}
	.span_2 {
		width: calc(20% - 30px);
	}
	.span_4 {
		background-color: #999;
		height: 5000px;
		width: calc(50% - 30px);
	}
	.span_6 {
		width: calc(30% - 30px);
	}
	.span_12 {
		width: calc(100% - 30px);
		height: 100px;
		background-color: #ccc;
	}
	.stickyContainer {
		width: 100%;
		display: block;
		position: relative;
	}
	.stickyBox {
		position: relative;
		display: block;
		width: 100%;
		height: 450px;
	}
	#sticky {
		position: relative;
		width: 303px;
		height: 100px;
		background-color: #f00;
		top: 0;
	}
	#info {
		position: relative;
		display: block;
		width: 100%;
		background-color: #ccc;
	}
	#sticky.fixedBottom {
		position: absolute;
		top: inherit;
		bottom: 0;
	}
	#sticky.fixed {
		position: fixed;
	}

JavaScript

function $(id) {
			return document.getElementById(id);
		}

		function sticky() {
    debugger;
			var stickyBoxHeight = $('stickyBox').offsetHeight;
		
			var stickyTop = $('stickyBox').getBoundingClientRect();
			var stickyBoxTop = stickyTop.top;

			var stickyBoxBottom = stickyBoxTop + stickyBoxHeight;

			var stickyHeight = $('sticky').offsetHeight;

			if(stickyBoxTop <= 0) {
				$('sticky').className = 'fixed';
			} else if(stickyBoxBottom >= stickyBoxHeight) {
				$('sticky').className = '';
			}

			if(stickyBoxBottom <= stickyHeight) {
				$('sticky').className = 'fixedBottom';
			}
		}

		window.onscroll = function() {
			sticky();
		}