JSFiddle - React, Tailwind, and code Playground

HTML

<div class='testContainer'>

<div class='helperList'>
   <div class='helperListItem'>
      <span>
        Sample Data Item 1
        <span class='helperItemExtraData'>
            Data 1 Special Info
        </span>
      </span>
   </div>
   <div class='helperListItem'>
      <span>
        Sample Data Item 2
        <span class='helperItemExtraData'>
            Data 2 Special Info
        </span>
      </span>
   </div>
   <div class='helperListItem'>
      <span>
        Sample Data Item 2
        <span class='helperItemExtraData'>
            Data 2 Special Info
        </span>
      </span>
   </div>
   <div class='helperListItem'>
      <span>
        Sample Data Item 2
        <span class='helperItemExtraData'>
            Data 2 Special Info
        </span>
      </span>
   </div>
   <div class='helperListItem'>
      <span>
        Sample Data Item 2
        <span class='helperItemExtraData'>
            Data 2 Special Info
        </span>
      </span>
   </div>
   <div class='helperListItem'>
      <span>
        Sample Data Item 2
        <span class='helperItemExtraData'>
            Data 2 Special Info
        </span>
      </span>
   </div>
   <div class='helperListItem'>
      <span>
        Sample Data Item 2
        <span class='helperItemExtraData'>
            Data 2 Special Info
        </span>
      </span>
   </div>
   <div class='helperListItem'>
      <span>
        Sample Data Item 2
        <span class='helperItemExtraData'>
            Data 2 Special Info
        </span>
      </span>
   </div>
   <div class='helperListItem'>
      <span>
        Sample Data Item 2
        <span class='helperItemExtraData'>
            Data 2 Special Info
        </span>
      </span>
   </div>
   <div class='helperListItem'>
      <span>
        Sample Data Item 2
        <span class='helperItemExtraData'>
            Data 2 Special Info
        </span>
      </span>
   </div>
   <div class='helperListItem'>
      <span>
        Sample Data Item 2
 ...

CSS

div.testContainer{
  width: 500px;
  height: 500px;
  border: 1px solid black;
}
div.helperList{
   position: absolute;
   width: auto;
   max-height: 300px;
   display: flex;
   flex-direction: column;
   overflow-y: auto;
   overflow-x: hidden;
   z-index: 10;
}

div.helperListItem > span {
  display: flex;
  white-space: nowrap;
}