JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="holder">
        <div class="sidebar">
            <b>Peter Woyzbun</b>
            <br/>
            <br/>QIO
            <br/>LUNCH
            <br/>Posters
            <br/>Great Economists
            <br/>Westboro Creative
            <br/>&#8212;
            <br/>About
            <br/>Contact</div>
        <div class="main">
            <div style='height:200px;' class='post'>
                <p class="description" style="display: none;">This is <a href="http://www.google.com">Google</a></p>
                Website Other Stuff
                <br/>Other Stuff
            </div>
            <div style='height:250px;' class='post'>
                <p class="description" style="display: none;">This is <a href="http://www.twitter.com">Twitter</a></p>
                Packaging
            </div>
            <div style='height:350px;' class='post'>
                <p class="description" style="display: none;">This is <a href="http://www.yahoo.com">Yahoo</a></p>
                Mobile Website
            </div>
            <div style='height:200px;' class='post'>
                <p class="description" style="display: none;">Facebook</p>
                Proposal Book
            </div>
            <div id='date'></div>
            <div style='height:800px;'></div>
        </div>
    </div>
</body>

CSS

body {
	margin: 0px;
	padding: 25px;
	font-family: helvetica, arial;
	font-size: 9pt;
}

.holder {
	width: 100%;
} 

.sidebar {
	width: 200px;
	font-family: helvetica, arial;
	font-size: 9pt;
	float: left;
	position: fixed;
} 

.main {
	padding-left: 225px;
	width: 640px;
	font-family: helvetica, arial;
	font-size: 9pt;
	float: left;
} 

.info {
	width: 180px;
	font-family: helvetica, arial;
	font-size: 9pt;
	float: left;
	margin-left: 885px;
	position: fixed;
} 

p.content {
	width: 180px;
	border-top: 1px solid #CCCCCC;
	padding-bottom: 5px;
	padding-top: 5px;
	margin: 0px;
}

.post {
	border: 1px dashed grey;
	margin-right: 50px;
	margin-bottom: 20px;
}

#date {
	position:fixed;
	top:25px;
	right:20px;
	height: 90px;
	width: 45px;
	background: grey;
}

.Desc {
	width: 200px;
	font-family: helvetica, arial;
	font-size: 9pt;
	float: left;
	position: fixed;
	background: grey;
}

JavaScript

$(window).load(function () {
    $(window).on("scroll resize", function () {
        var pos = $('#date').offset();
        $('.post').each(function () {
            if (pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top) {
                $('#date').html($(this).find('.description').text()); //or any other way you want to get the date
                return; //break the loop
            }
        });
    });

    $(document).ready(function () {
        $(window).trigger('scroll'); // init the value
    });

})