JSFiddle - React, Tailwind, and code Playground

HTML

<div class="calendar">
    <div id="button-parent">
        <div class="button">
            <a href="#"><span>click me!</span></a>
        </div>
    </div>

    <ul id="event-list">
        <a href="#"><li>05 NOV 2015<span>09:00 - 22:00</span><span>Private Cooking Day</span></li></a>
        <a href="#"><li>05 NOV 2015<span>09:00 - 22:00</span><span>Private Cooking Day</span></li></a>
        <a href="#"><li>05 NOV 2015<span>09:00 - 22:00</span><span>Private Cooking Day</span></li></a>
        <a href="#"><li>05 NOV 2015<span>09:00 - 22:00</span><span>Private Cooking Day</span></li></a>
        <a href="#"><li>05 NOV 2015<span>09:00 - 22:00</span><span>Private Cooking Day</span></li></a>
        <a href="#"><li>05 NOV 2015<span>09:00 - 22:00</span><span>Private Cooking Day</span></li></a>
        <a href="#"><li>05 NOV 2015<span>09:00 - 22:00</span><span>Private Cooking Day</span></li></a>
        <a href="#"><li>05 NOV 2015<span>09:00 - 22:00</span><span>Private Cooking Day</span></li></a>
        <a href="#"><li>05 NOV 2015<span>09:00 - 22:00</span><span>Private Cooking Day</span></li></a>
        <a href="#"><li>05 NOV 2015<span>09:00 - 22:00</span><span>Private Cooking Day</span></li></a>
        <a href="#"><li id="li-1">05 NOV 2015<span>09:00 - 22:00</span><span>Private Cooking Day</span></li></a>
        <a href="#"><li>05 NOV 2015<span>09:00 - 22:00</span><span>Private Cooking Day</span></li></a>
        <a href="#"><li>05 NOV 2015<span>09:00 - 22:00</span><span>Private Cooking Day</span></li></a>
        <a href="#"><li>05 NOV 2015<span>09:00 - 22:00</span><span>Private Cooking Day</span></li></a>
    </ul>
    
</div>

CSS

#button-parent {
    width:100px;
    height: 100px;
    background: #CC99FF;
}

.button {
    background:#99ff99;
    width: 50px;
    height: 20px;
}

/* list */

.calendar ul {
	background: #FFF;
	list-style-type: none;
	display: inline-block;
	width: calc(100% - 380px);
	float: right;
	height: 343px;
	overflow-y: auto;
	color: #666;
	font-size: 14px;
  border-top: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
}
.calendar ul a {text-decoration: none; font-weight: normal; font-family: 'Source Sans Pro', sans-serif; font-size: 16px;}
.calendar li {
	font-style: normal;
  font-weight: 600;
	padding: 20px 0;
	margin: 0;
	box-sizing: border-box;
	border-top: 1px solid #ebebeb;
	border-bottom: 1px solid #ebebeb;
	background: url('../images/home/list-arrow.png') no-repeat;
	background-position: right center;
}
.hov {background:#D4D4D4;}

.calendar li span {margin-left: 30px;}

JavaScript

$(document).ready(function(){
	
	$('.button').click(function(){
		$('body').scrollTo('#li-1', 200);
        $("#li-1").toggleClass("hov");
	});
})