div.html

<div class="tag-container"><div class="tag"><div class="tag-label">Product</div><div class="tag-close"><svg height="14" width="14" viewBox="0 0 20 20" aria-hidden="true" focusable="false" class="tag-close-svg"><path d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"></path></svg></div></div><div class="tag"><div class="tag-label">State</div><div class="tag-close"><svg height="14" width="14" viewBox="0 0 20 20" aria-hidden="true" focusable="false" class="tag-close-svg"><path d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"></path></svg></div></div><div class="tag"><div class="tag-label">Sub Category</div><div class="tag-close"><svg height="14" width="14" viewBox="0 0 20 20" aria-hidden="true" focusable="false" class="tag-close-svg"><path d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"></path></svg></div></div></div>





.tag-close{
  -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 2px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding-left: 4px;
    padding-right: 4px;
    box-sizing: border-box;
}
.tag-close:hover{
  background-color: #FFBDAD;
  color: #DE350B;
}
.tag-label{
  border-radius: 2px;
color: hsl(0,0%,20%);
font-size: 85%;
overflow: hidden;
padding: 3px;
padding-left: 6px;
text-overflow: ellipsis;
white-space: nowrap;
box-sizing: border-box;
}

.tag-container{
  -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: baseline;
    background-color: hsl(0,0%,100%);
    border-color: hsl(0,0%,80%);
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    cursor: default;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    min-height: 38px;
    outline: 0 !important;
    /* position: relative; */
    -webkit-transition: all 100ms;
    transition: all 100ms;
    box-sizing: border-box;
}