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;
}
div.helperList{
   position: absolute;
   display: flex;
   flex-direction: column;
   width: auto;
   overflow-y: auto;
   overflow-x: hidden;
   max-height: 300px;
   z-index: 10;
}
span.helperItemExtraData{
    float: right;
    padding-right:16px;
}
.scrollPadding{
    /* padding-right:18px; */
    width: calc(100% + 6px);
}

JavaScript

if(1==1){
    var listItems = document.getElementsByClassName('helperListItem');
    for(var i=0; i<listItems.length; i++){
      listItems[i].classList.add("scrollPadding");
    }
}