Как сделать мои теги внутри элемента ввода

Question

Элементы тегов отображаются над элементом ввода, но я бы хотел, чтобы они находились внутри элемента ввода. Я включил код jQuery и CSS. Может кто-нибудь дать мне совет?

[].forEach.call(document.getElementsByClassName('tags-input'), function(el) {
      let hiddenInput = document.createElement('input'),
        mainInput = document.createElement('input');
      tags = [];

      hiddenInput.setAttribute('type', 'hidden');
      hiddenInput.setAttribute('name', el.getAttribute('data-name'));
      mainInput.setAttribute('name', 'tag');
      mainInput.setAttribute('id', 'tag2');
      mainInput.setAttribute('placeholder', 'Contoh: akreditasi, banding, TUK mandiri')
      mainInput.setAttribute('type', 'text');
      mainInput.classList.add('main-input');
      mainInput.addEventListener('input', function() {
        let enteredTags = mainInput.value.split(',');
        if (enteredTags.length > 1) {
          enteredTags.forEach(function(t) {
            let filteredTag = filterTag(t);
            if (filteredTag.length > 0)
              addTag(filteredTag);
          });
          mainInput.value = '';
        }

      });

      ...

.tags-input {}

.main-input {}

.tags-input .tag {
  font-size: 85%;
  padding: 0.5em 0.75em;
  margin: 0.25em 0.1em;
  display: inline-block;
  background-color: #ddd;
  border-radius: 10%;
}

.tags-input .tag .close::after {
  content: 'x';
  font-weight: bold;
  margin-left: 0.75em;
  display: inline-block;
  transform: (1.2);
  cursor: pointer;
}

.tags-input .main-input {
  border: 0;
  outline: 0;
}

...
<div class="field">
  <label>Tag</label>
  <div class="tags-input" data-name="tags-input">

  </div>
  ...