I have TagsInput where the user can enter any data (assumed to be links). Since links can be very long, I need a way to shorten their display so that the window does not stretch too much. I solved it with white-space: nowrap

Since I'm using TagsInput, the user should be able to delete the input. I have this functionality. And as you can see, it works on short links. But if the link is long, this cross is at the end and, accordingly, it is not visible. I would like everything to be displayed as follows (I marked the desired functionality in red):

Thus, I want the user to be able to delete a long link

.tag {
    display:flexbox;
    /* align-items: center; */
    margin: 5px 0;
    margin-right: 5px;
    padding: 0 5px;
    border: 1px solid black;
    border-radius: 5px;
    color: black;
    overflow:hidden;
    text-overflow: ellipsis;
    max-width: fit-content;
    white-space: nowrap;
}

Just in case, the part of the code where I define the button to remove the tag

...
    const deleteTag = (index) => {
    setTags(prevState => prevState.filter((tag, i) => i !== index))
}

return (
    <div className={classes.container}>
        {tags.map((tag, index) => <div className={classes.tag}>
            {tag}
            <ClearIcon className={classes.del} fontSize="small" onClick={() => deleteTag(index)} />
        </div>
        )}
        <input
            className={classes.input}
            value={input}
            placeholder={props.inputPlaceholder}
            onKeyDown={onKeyDown}
            onKeyUp={onKeyUp}
            onChange={onChange}
        />
    </div>);
}