JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <div class="left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    <div style="margin-top:1rem;">
      <input id="slider" type="range" min="1" max="8" value="8">
      <p id="slider-output" style="margin-top:0;"></p>
    </div>

  </div>

  <div class="right">
    <ul>
      <li class="1">
          <h4>1 Secondary Content</h4>
          <a href="#a1">Lorem ipsum dalora itmet vistafa alotma pastruma</a><br>
          <a href="#a2">Lorem ipsum dalora itmet vistafa alotma pastruma</a><br>
          <a href="#a3">Lorem ipsum dolora</a><br>
          <a href="#a4">Lorem ipsum dolora</a><br>
          <a href="#a5">Lorem ipsum dolora</a>
      </li>

      <li class="2">
          <h4>2 Secondary Content</h4>
          <a href="#b1">Lorem ipsum dalora itmet vistafa alotma pastruma</a><br>
          <a href="#b2">Lorem ipsum dalora itmet vistafa alotma pastruma</a><br>
          <a href="#b3">Lorem ipsum dolora</a><br>
          <a href="#b4">Lorem ipsum dolora</a><br>
          <a href="#b5">Lorem ipsum dolora</a><br>
          <a href="#b6">Lorem ipsum dolora</a>
      </li>

      <li class="3">
          <h4>3 Secondary Content</h4>
          <a href="#c1">Lorem ipsum dalora itmet vistafa alotma pastruma</a><br>
          <a href="#c2">Lorem ipsum dalora itmet vistafa alotma pastruma</a><br>
          <a href="#c3">Lorem ipsum dolora</a><br>
          <a href="#c4">Lorem ipsum dolora</a>
      </li>

      <li class="4">
          <h4>4 Secondary Content</h4>
          <a href="#d1">Lorem ipsum dalora itmet vistafa alotma pastruma</a><br>
          <a href="#d4">Lorem ipsum dolora</a>
      </li>

      <li class="5">
          <h4>5 Secondary Content</h4>
          <a href="#e1">Lorem ipsum dalora itmet vistafa alotma pastruma</a><br>
          <a...

CSS

#container {
    width: 900px;
    min-height: 400px;
    display: flex;
    gap: 40px;
    padding: 1em;
    border: 1px solid #ccc;
}
.left {
    width: 25%;
    padding-right: 40px;
    border-right: 1px solid #ccc;
}
.right {
    width: 100%;
    margin-left: auto;
}
/*
ul {
  border: 1px solid red;
  height: 400px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
*/

ul {
  list-style: none;
  columns: 3;
  column-gap: 25px;
  margin: 0;
  padding: 0;
  width: 98%;
  border: 1px solid blue;
}

li {
  border: 1px solid red;
  list-style-type: none;
  margin: 0 0 15px 0;
  
  /*display: inline-block;*/
  break-inside: avoid-column;
  
}
li:first-child {
  margin-top: 0;
}

li a {
  display: inline-block;
  margin: .125rem 0;
}

h4 {
  margin: 0;
}

[hidden] {
  display: none !important;
}

JavaScript

const slider = document.getElementById('slider');
const output = document.getElementById('slider-output');
const LIs = document.querySelectorAll('li');

output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;

  LIs.forEach(li => {
    if (+li.classList.value > slider.value) {
      li.setAttribute('hidden', '');
    } else {
      li.removeAttribute('hidden');
    }
  });
}