clipboard - как переместить в скрипте кнопку?

Пытаюсь сделать себе на сайте кнопку копирования в буфер. Кнопка должна располагаться под блоком div (текста, который копируется). Таких блоков с текстом много на странице и каждый должен иметь такую кнопку "копировать".. но снизу от блока, под ним! А кнопка упорно получается либо справа, либо сверху.

Помогите решить проблему пож-та!

(Был вариант запихнуть кнопку внутрь div тогда с расположением проблема решается, но возникает другая, копируется вместе с текстом кнопки, то есть со словом "копировать", так как на странице есть еще скрипт источник сайт .... - поэтому вариант внутри div отпал)

<script src="/clipboard.min.js"></script>
<script>
//после загрузки страницы
window.addEventListener('load', function() {

  // получить коллекцию элементов c классом pre на странице
  var pre = document.getElementsByClassName('pre');
  
  // перебрать все элементы pre с помощью цикла for
  for (var i=0; i<pre.length; i++) {
  
    // создать контейнер div 
    var divClipboard = document.createElement('div');
    
    // добавить к контейнеру div класс .bd-clipboard
        divClipboard.className = 'bd-clipboard';
        
    // создать элемент span (кнопку Копировать)
    var button = document.createElement('span');

    // добавить к элементу span класс .btn-clipboard
    button.className = 'btn-clipboard';
    // элементу span установить контент Копировать
    button.textContent = 'Копировать';
    
    // добавить элемент span в качестве дочернего к элементу div
    divClipboard.appendChild(button);
    
    // добавить элемент div перед pre
    pre[i].parentElement.insertBefore(divClipboard,pre[i]);

function onSuccess(button) {
    parentList.insertAdjacentHTML('beforeend', button);

  }
  // инициализируем Clipboard для каждой кнопки
  var btnClipboard = new ClipboardJS('.btn-clipboard', {
    target: function(trigger) {
      console.log(trigger.parentElement.nextElementSibling);
      trigger.clearSelection;
      return trigger.parentElement.nextElementSibling;
    }
  });
  btnClipboard.on('success', function(e) {
  // убираем выделение
  //e.clearSelection();
  // изменяем текст триггера на Скопировано
  e.trigger.textContent = 'Скопировано';
  // Возращаем через 3 секунды текст триггеру на Копировать 
  window.setTimeout(function() {
    e.trigger.textContent = 'Копировать';
  }, 3000);
  });
}); 

</script>

<style>
.pre {position: relative; margin-left: auto; margin-right: auto;}
.btn-clipboard {
  position: relative;
  bottom: 0px;
  right: 0px;
  display: block
  z-index: 10;
   padding: 4px 8px;
   font-size: 12px;
  color: #818a91;
  cursor: pointer;
  background-color: transparent;
  border-radius: 4px;
  user-select: none;
}
.btn-clipboard:hover {color:#fff; background-color:#027de7 }
.bd-clipboard {position: relative;}

}
</style>