JSFiddle - React, Tailwind, and code Playground

by akmiecik

HTML

<div id="this_year">
<div class="the_data"><div class="the_months"><div class="miles_ridden">September:  <span class="miles">99</span></div> <div class="miles_ridden">August:  <span class="miles">492</span></div> <div class="miles_ridden">July:  <span class="miles">528</span></div> <div class="miles_ridden">June:  <span class="miles">429</span></div> <div class="miles_ridden">May:  <span class="miles">418</span></div> <div class="miles_ridden">April:  <span class="miles">448</span></div> <div class="miles_ridden">March:  <span class="miles">534</span></div> <div class="miles_ridden">February:  <span class="miles">406</span></div> <div class="miles_ridden">January:  <span class="miles">381</span></div></div><div class="the_weeks"><div class="weeks_sum"><span class="ordinal">36<sup>th</sup> week:  </span><span class="miles">37</span></div> <div class="weeks_sum"><span class="ordinal">35<sup>th</sup> week:  </span><span class="miles">120</span></div> <div class="weeks_sum"><span class="ordinal">34<sup>th</sup> week:  </span><span class="miles">120</span></div> <div class="weeks_sum"><span class="ordinal">33<sup>rd</sup> week:  </span><span class="miles">125</span></div> <div class="weeks_sum"><span class="ordinal">32<sup>nd</sup> week:  </span><span class="miles">131</span></div> <div class="weeks_sum"><span class="ordinal">31<sup>st</sup> week:  </span><span class="miles">83</span></div> <div class="weeks_sum"><span class="ordinal">30<sup>th</sup> week:  </span><span class="miles">120</span></div> <div class="weeks_sum"><span class="ordinal">29<sup>th</sup> week:  </span><span class="miles">106</span></div> <div class="weeks_sum"><span class="ordinal">28<sup>th</sup> week:  </span><span class="miles">139</span></div> <div class="weeks_sum"><span class="ordinal">27<sup>th</sup> week:  </span><span class="miles">110</span></div> <div class="weeks_sum"><span class="ordinal">26<sup>th</sup> week:  </span><span class="miles">116</span></div> <div class="weeks_sum"><span...

CSS

#last_year > div.the_data > div.the_months {
        position: absolute;
        color: #000;
        left: 183px;
        background: lightgrey;
        width: 40%;
        font-size: 18px;
        height: 106px;
        overflow-y: scroll;
        line-height: 25px;
    }
       #this_year > div > div.the_months {
        color: #000;
        width: 150px;
        line-height: 25px;
        font-size: 18px;
        height: 106px;
        overflow-y: scroll;
        position: absolute;
    }
    .the_weeks {display: none;}

JavaScript

$('#last_year > div.the_data > div.the_months').on('scroll', function () {
    $('#this_year > div.the_data > div.the_months').scrollTop($(this).scrollTop());
});
$('#this_year > div.the_data > div.the_months').on('scroll', function () {
    $('#last_year > div.the_data > div.the_months').scrollTop($(this).scrollTop());
});