JSFiddle - React, Tailwind, and code Playground

by Marian Rick

HTML

<div id="scrollable-div">
  <div class="list-element">
    <div class="dropdown-trigger">
      <ul>
        <li>Lorem.</li>
        <li>Esse!</li>
        <li>Impedit.</li>
        <li>Perspiciatis.</li>
      </ul>
    </div>
    <div class="dropdown-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis aut nobis enim architecto, eligendi quae.</div>
  </div>
  <div class="list-element">
    <div class="dropdown-trigger">
      <ul>
        <li>Lorem.</li>
        <li>Ipsum!</li>
        <li>Illo?</li>
        <li>Inventore.</li>
      </ul>
    </div>
    <div class="dropdown-text">Vel, consequatur officia. Esse doloremque, repellat ratione. Porro aliquid vitae quisquam iusto! Unde, accusamus cupiditate!</div>
  </div>
  <div class="list-element">
    <div class="dropdown-trigger">
      <ul>
        <li>Lorem.</li>
        <li>Quaerat.</li>
        <li>Dolore!</li>
        <li>Odio.</li>
      </ul>
    </div>
    <div class="dropdown-text">Eaque ducimus, dignissimos. Impedit possimus natus esse, quod! Facere possimus, quaerat numquam excepturi tenetur sed!</div>
  </div>
  <div class="list-element">
    <div class="dropdown-trigger">
      <ul>
        <li>Lorem.</li>
        <li>Amet.</li>
        <li>Similique.</li>
        <li>Saepe.</li>
      </ul>
    </div>
    <div class="dropdown-text">Quae quia harum a asperiores, autem, vel id eius commodi, explicabo quasi officia alias illo!</div>
  </div>
  <div class="list-element">
    <div class="dropdown-trigger">
      <ul>
        <li>Lorem.</li>
        <li>Cum?</li>
        <li>Distinctio.</li>
        <li>Officia.</li>
      </ul>
    </div>
    <div class="dropdown-text">Non beatae sunt expedita aspernatur, sequi magnam doloremque aperiam libero, necessitatibus itaque amet tempore quidem.</div>
  </div>
  <div class="list-element">
    <div class="dropdown-trigger">
      <ul>
        <li>Lorem.</li>
        <li>Sed?</li>
        <li>Accusantium!</li>
        <li>Id.</li>
      </ul>
...

CSS

#scrollable-div {
  height: 200px;
  border: 1px solid red;
  overflow-y: scroll;
}
/* list element */
.list-element {
  margin: 1em 1em 2em;
}
.dropdown-trigger {
  float: left;
  width: 2em;
  height: 2em;
  background: red;
  border-radius: 100%;
  margin-right: 1em;
}

/* css trigger */
.dropdown-trigger:hover ul {
  display: block;
  position: absolute;
}

/* dropdown element */
.dropdown-trigger ul {
  display: none;
}
.dropdown-trigger ul li {
}

JavaScript

$(document).ready(function(){
  
});