JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div class="main">
   <div></div>
   <input type="checkbox" class="text1"><a> 1995</a><br>
     <p class="text1">
       Lorem ipsum dolor sit amet, dictas albucius vulputate et vim, has eu primis mnesarchum, mel ad sumo brute oblique. Sit mollis repudiare cu, impedit corpora necessitatibus quo ne, sit alii feugiat omittantur at. In molestie salutatus pro, illum alterum perpetua ne ius. Ex veritus fierent pro, nec in inani mollis vituperatoribus. Cu sea nusquam intellegebat, ius alii oporteat adipisci ut.
     </p>
     
     
   <div></div>
   <input type="checkbox" class="text2"><a> 1996</a><br>
   <p class="text2">
       Lorem ipsum dolor sit amet, dictas albucius vulputate et vim, has eu primis mnesarchum, mel ad sumo brute    oblique. Sit mollis repudiare cu, impedit corpora necessitatibus quo ne, sit alii feugiat omittantur at. In molestie salutatus pro, illum alterum perpetua ne ius. Ex veritus fierent pro, nec in inani mollis vituperatoribus. Cu sea nusquam intellegebat, ius alii oporteat adipisci ut.
     </p>
     
     
     <div></div>
     <input type="checkbox" class="text3"><a> 1997</a><br>
   <p class="text3">
       Lorem ipsum dolor sit amet, dictas albucius vulputate et vim, has eu primis mnesarchum, mel ad sumo brute    oblique. Sit mollis repudiare cu, impedit corpora necessitatibus quo ne, sit alii feugiat omittantur at. In molestie salutatus pro, illum alterum perpetua ne ius. Ex veritus fierent pro, nec in inani mollis vituperatoribus. Cu sea nusquam intellegebat, ius alii oporteat adipisci ut.
     </p>
     
     
     <div></div>
     <input type="checkbox" class="text4"><a> 1998</a><br>
     <p class="text4">
       Lorem ipsum dolor sit amet, dictas albucius vulputate et vim, has eu primis mnesarchum, mel ad sumo brute    oblique. Sit mollis repudiare cu, impedit corpora necessitatibus quo ne, sit alii feugiat omittantur at. In molestie salutatus pro, illum alterum...

CSS

* {
  font-family: Arial;
}

.main {
  width: 70%;
  //background-image: -webkit-linear-gradient(left, black, black 7px, transparent 7px, transparent);
  background-image: url('https://www.pocketpc.ch/attachments/samsung-galaxy-note/84391d1322038387-schwarzer-lockscreenhintergrund-moeglich-black.jpg');
  background-repeat: no-repeat;
  background-size: 7px calc(100% - 50px);
  background-position: 8px 25px;
}

.main > p {
  display: none;
  margin: 10px 0px 0px 40px;
}

.main a {
  position: relative;
  bottom: 6px;
}

.main > div:not(.line) {
  background: black;
  padding: 10px;
  border-radius: 100%;
  width: 3px;
  height: 3px;
  border: 0;
  position: relative;
  top: 24px;
  z-index: 0;
}

input {
  width: 25px;
  height: 25px;
  opacity: 0;
}

input.text1:checked ~ p.text1 {
  display: block;
}

input.text2:checked ~ p.text2 {
  display: block;
}

input.text3:checked ~ p.text3 {
  display: block;
}

input:last-of-type:checked ~ p.text4 {
  display: block;
}

JavaScript

$("input").click(function() {
	$("input").prop( "checked", false );
  $(this).prop( "checked", true );
  
  if($("input").is(":last-of-type:checked")) {
  	$(".main").css("background-size", "7px 170px");
  } else {
    $(".main").css("background-size", "7px calc(100% - 50px)");
  }
});