Timeline based Custom post type and required styles

functions.php

add_action( 'wp_enqueue_scripts', 'mears_scripts');
function mears_scripts(){
	wp_enqueue_script( 'mears-infinite-scroll', get_stylesheet_directory_uri() . '/vendor/infinite-scroll/infinite-scroll.pkgd.min.js', array('jquery'), null, true );
	wp_enqueue_script( 'mears-history', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'), null, true );
}

style.css

.history-page article{
	background-color: #fff;
}

.history-page article .e185-1.x-section{
	box-shadow: none;
	z-index: auto;
	margin: 0 0 1.313em;
    padding: 15px 0 33px;
}

.history-page article .x-container{
	max-width: 950px;
	position: relative;
}

.history-page article .x-container::before{
	content: "";
	position: absolute;
    right: 50%;;
    top: 0;
    width: 1px!important;
    height: 100%;
    background-color: #999999;
    opacity: 0.5;
}

.columns{
	display: flex;
	margin-left: -.75rem;
    margin-right: -.75rem;
    margin-top: -.75rem;
    padding: 0 5rem 3rem;
    position: relative;
}
.columns::after {
    content: "";
    background-image: url('img/svg/bullet.svg');
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    width: 12px;
    height: 13.9px;
    top: 50%;
    left: 49.4%;
}
#historyMears :nth-child(odd).columns {
    flex-direction: row;
}
#historyMears :nth-child(even).columns {
    flex-direction: row-reverse;
}
#historyMears :nth-child(1).columns::before {
    content: "";
    background-image: url('img/svg/bullet.svg');
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    width: 12px;
    height: 13.9px;
    top: 0;
    left: 49.4%;
}
.column{
	display: block;
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
    padding: .75rem;
    margin: 0 3rem;
}

.column h2{
	margin: 0 0 1rem;
    font-size: 145.7%;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.1em;
}
.column .entry-content {
    border-top: 1px solid #999999;
    border-bottom: 1px solid #999999;
    padding: 1.5rem 0;
}

.column .entry-content p{
	font-weight: 700;
    color: #000;
    font-size: 1rem;
    letter-spacing: 0.01em;
}
.column.col-one h2 {
    margin-top: 2rem;
    letter-spacing: 0.05em;
}
.column.col-one img {
    border: 1px solid #999999;
    display: grid;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    max-height: 123px;
}

#historyMears :nth-child(1).columns{
	margin-top: -.75rem;
	margin-bottom: -3rem;
}

#historyMears :nth-child(1).columns .column{
	padding: 5rem 0;
}

@media screen and (max-width: 880px){
	.column h2{
		font-size: 130.7%;
	}
}
@media screen and (max-width: 766px){
	.column h2{
		font-size: 150.7%;
	}
	.column .entry-content p{
		font-size: 1.25rem;
	}
}
@media screen and (max-width: 700px){
	.columns{
		padding: 0;
	}
	.column{
		margin: 0 2rem;
	}
}
@media screen and (max-width: 500px){
	.history-page article .x-container{
		padding-left: 3rem;
		position: inherit;
	}
	.history-page article .x-container::before{
		left: 28px;
		top: 100px;
	}
	.columns{
		display: block;
		padding: 0 0 4rem;
	}
	.column h2 {
    	font-size: 200.7%;
	}
	#historyMears :nth-child(1).columns::before{
		top:-30px;
	}
	#historyMears :nth-child(1).columns::before,
	.columns::after{
		left: 0;
	}
	.column.col-one h2{
		margin-top: 0;
	}
	#historyMears :nth-child(1).columns{
		margin-top: -0.75rem;
		margin-bottom: 0;
	}
	#historyMears :nth-child(1).columns .column{
		padding: 0.75rem;
	}
	
}

timelinehistory.php

<?php
add_shortcode( 'mears-history', 'mears_history_listing' );
function mears_history_listing() {
    
    global $wp_query, $post;
    ob_start();?>
	
	<?php 
		
		$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
		
    	$query = new WP_Query( array(
    		'post_type' => 'timeline-item',
			'posts_per_page' => 10, 
			'order' => 'ASC',
			'orderby' => 'post_date',
			'paged'	=> $paged
		));

		if( $query->have_posts() ) :?>
		<div class="x-container" id="historyMears">
		 	<?php while( $query->have_posts() ) : $query->the_post();?>
		 	<div class="columns">
			 	<div class="column col-one">
					 <h2><?php echo get_the_date( 'Y', $post->ID )?></h2>
				 	<?php if(has_post_thumbnail() ) : ?>
				  		<a title="<?php the_title(); ?>" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('medium', array('alt'=>get_the_title($post->ID), 'title'=>get_the_title($post->ID))); ?></a>
				  	<?php endif;?>
			 	</div>
		        <div class="column col-two">
			        <div class="entry-content-wrapper">
			        	<a href="<?php the_permalink(); ?>"><h2><?php the_title(); ?></h2></a>
						<div class="entry-content"><?php the_excerpt()?></div>
			        </div>
		        </div>
		 	</div>
		 	
		    <?php endwhile;?>
		    <div class="history-pagination">
		    	<?php next_posts_link( 'Older', $query->max_num_pages );?>
				<?php previous_posts_link( 'Newer' );?>
		    </div>
            <?php wp_reset_postdata(); ?>
		</div>
		<?php endif;?>
    <?php $myvariable = ob_get_clean();
    return $myvariable;
}?>