<div class="input-tags">
  <span class="tags"></span>
  <input type="text" placeholder="Add tags here...">
  <div class="dropdown">

  </div>
</div>

html {
  height: 100%;
}

body {
  font-family: sans-serif;
  font-size: 14px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.input-tags {
  border: 1px solid lightgrey;
  border-radius: 6px;
  outline-style: none;
  display: flex;
  align-items: center;
  padding: 0.8em 1.2em;
  width: 50%;
  font-size: 20px;

  input {
    border: none;
    padding: 10px 0;
    outline-style: none;
    font-size: 20px;
    width: 100%;
  }
  
  .tag {
    background-color: lightgrey;
    padding: 0.6em;
    border-radius: 4px;
    margin-right: 0.4em;
    flex-grow: 2;
    
    &:last-child {
      margin-right: 0.6em
    }
  }
}

$(".input-tags").on('keydown', addTag);

function addTag(evt) {
  const tag = evt.target.value;
  console.log(evt.key);
  if(evt.key =='Enter' || evt.key == 13) {
    const tagTrim = tag.trim() 
    if(tagTrim != "") {
      // Add tag
      $(".input-tags .tags").append("<span class='tag'>"+tagTrim+"</span>");
      // Empty input
      evt.target.value = '';
    }
  } else if (evt.key == "Backspace" || evt.key == 8) {
    if (tag == "") { // If empty
      // Remove last tag
      $(".input-tags .tags .tag").last().remove()
    }
  }
}