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

$.get('https://api.giphy.com/v1/gifs/search?q=funny+cat&api_key=dc6zaTOxFJmzC', function(data){
data.data.forEach(function(item,dx){
let $catpic = $("<img/>"),
    $catitem = $("<li/>");
    $catpic.attr("src", item.images.fixed_height_still.url);
    $catitem.append($catpic);
    $catitem.attr("id", dx);
    $($catitem).appendTo("#small, #large");
});
});

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