Is there an HTML element that can hold spans and have editable text inside?
What I am looking for is an element or some other way to have both a span (or other container) and editable text in the same box, in this case one of the boxes on the left.
Stack Overflow has the same UI control when asking a question - in fact you just used it to tag your question!
If you inspect it you'll see it's a div disguised as an input - a "faux input" if you will. Inside it is a real input, and when you enter a tag, it moves the input over and adds a <span> styled like a tag in front of it, that you can delete by clicking the 'X'.
Maybe you should adopt a similar pattern.
Why don't you check out these libraries?