Show Read More Link for Truncated Text

I have 8 divs with the class of bios_ellipsis with 8 links with the class of read_more. When the browser is made smaller, the clientWidth also becomes smaller and I am using the following css in order to truncate the text:

.bios_ellipsis {
vertical-align: middle!important;
overflow: hidden!important;
text-overflow: ellipsis!important;
display: -webkit-box!important;
-webkit-line-clamp: 5!important; 
line-clamp: 5!important;
-webkit-box-orient: vertical!important;
display: -moz-box;
}

I want the read more link to appear for every bios_ellipsis div and this link goes to 8 different urls. The problem with the code below is that the read more links end up in different places on top of the divs and don’t show up in an orderly manner.

jquery cdn

<script>
    $(document).ready(function(){
        
     var getElements = document.querySelectorAll('.bios_ellipsis');
     
      Array.from(getElements).forEach(function(element) {
      var pos = $('.bios_ellipsis').offset();
      if ( element.clientWidth <= 600 ) {
    
    for(var i = 0; i < getElements.length; i++){
    var top = pos.top[i] + '100px';
    var left = pos.left[i] + '500px';
    
    $('.read_more').css({
      position:'absolute',
      top:top[i],
      left:left[i]
    });
    
    }}
    });
    });
</script>