<div id="tag-container-01" class="tag-input-container" data-default-tags="java,html,php">
  <div class="input-container">
    <input type="text" placeholder="Type in tag name..." class="tag-input">
  </div>
  <div class="tags-container">
    <div class="tag">
      <output name="tags-01[]" value="java">Java</output>
      <button type="button" class="btn btn-delete" aria-label="delete">𐄂</button>
    </div>
    <div class="tag">
      <output name="tags-01[]" value="html">HTML</output>
      <button type="button" class="btn btn-delete" aria-label="delete">𐄂</button>
    </div>
    <div class="tag">
      <output name="tags-01[]" value="php">PHP</output>
      <button type="button" class="btn btn-delete" aria-label="delete">𐄂</button>
    </div>
  </div>
</div>
.tags-container {
  display: flex;
  align-items: center;
  padding: .25rem 0;
  gap: .5rem;
}

button {
  cursor: pointer;
}

.btn {
  box-sizing: content-box;
  width: .75rem;
  line-height: 1.5rem;
  font-size: 1.2rem;
  border: 0;
  border-radius: .25rem;
  opacity: .5;
}

.btn-delete {
  color: red;
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.