JSFiddle - React, Tailwind, and code Playground

HTML

<div id="article-links">
	<a href="javascript:void(0)">article 1</a>
	<a href="javascript:void(0)">article 2</a>
	<a href="javascript:void(0)">article 3</a>
	<a href="javascript:void(0)">article 4</a>
	<a href="javascript:void(0)">article 5</a>
</div>

<div id="article-preview">
	<div class="article">
    <h3>Article 1</h3>
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    </div>
	<div class="article">
    <h3>Article 2</h3>
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
    </div>
	<div class="article">
    <h3>Article 3</h3>
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
    </div>
	<div class="article">
    <h3>Article 4</h3>
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    </div>
	<div class="article">
    <h3>Article 5</h3>
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
    </div>
</div>

CSS

#article-links {
	width: 100%;
	height: 30px;
	margin: 5px;
	text-align: left;	
}

#article-preview {
	width: 200px;
	height: 250px;	
	margin: 15px;
	overflow: hidden;
	border: 1px solid #000;
}

.article {
	height: 250px;	
	margin: 0;
}

h3 {
	margin: 0;
	padding: 0;
}

JavaScript

$(document).ready(function() {
	// clicking the links in the article link container
	$('#article-links a').click(function() {
		var $this = $(this);	// save this instance of the click for access inside the loop
		
		// loop through all the article links and store the numeric value
		$('#article-links a').each(function(al) {
			// if the link being looked at currently matches the html/text of the link that was selected then
			if ($(this).html() == $this.html()) {
				// set the scroll position by multiplying the article previews height by the ordered number link
				// that was selected (i.e 500*1 will scroll the preview div up/down to scrollTop: 500)
				var articlePos = parseInt($('#article-preview').height())*al;
				
				// animate the scroll for a smooth scroll				
				$('#article-preview').animate({ scrollTop: articlePos });
			}
		});	
	});
});