JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<ul id="small" class="small gallery"></ul>
<ul id="large" class="large gallery"></ul>
</div>

CSS

div {
  display: flex;
  height: 100vh;
  overflow: hidden;
}
.small {
  width: 25%;
}
.small li {
  height: 100px;
}
.large li {
  height: 250px;
}
.large {
  flex:1;
}
ul {
  list-style: none;
  overflow:auto;
}
li {
  margin: 0;
  padding: 0;
}

img {
  height: 100%;
}

JavaScript

let giphyKitties = [];
let kittyCounter = 0;
const miniKittyList = $("#small");

$.get('https://api.giphy.com/v1/gifs/search?q=funny+cat&api_key=dc6zaTOxFJmzC', (data) = > {
  giphyKitties = data.data;
  console.log(data, 'data');
  console.log(giphyKitties, 'gifkitties');
  addCats();
});

const addCats = () => {
  for(let i = kittyCounter; i < (kittyCounter + 5); i++){
    let $catpic = $("<img/>"),
      $catitem = $("<li/>");
      $catpic.attr("src", giphyKitties[i].images.fixed_height_still.url);
      $catitem.append($catpic);
      $catitem.attr("id", i);
      $($catitem).appendTo("#small, #large");
  }
  kittyCounter+=5;
}

$("ul").on("click", "li", () => {
    $('#large').scrollTop(250*($(this).attr("id")));
});

$(window).scroll(() => {
let kittiesLow = ($(document).height() - miniKittyList.height() - miniKittyList.scrollTop() );
   if (kittiesLow > 0) {
     addCats();
    }
});