TinyMCE strips off the href tag inside span, if i change from text to visual

As mentioned in the title, the TinyMCE editor of WordPress cuts off the href tag that I have inside the span tag. Below is the code i use

h5
    a href=# target=_blank rel=noopener noreferrer
    i class=fa fa-map-marker aria-hidden=true/i Find us/a  
    span class=icon-righta href=https://testsite.com/test-gallery/ target=_blank rel=noopener noreferrer
        i class=fas fa-images aria-hidden=true/i
    /a
    /span
/h5

So every time I switch from text to visual and then back to text, this is the result of the code:

h5
    a href=# target=_blank rel=noopener
        i class=fa fa-map-marker aria-hidden=true/i Find us/a 
        span
            i class=fas fa-images aria-hidden=true/i
        /span
/h5

I have tried the answer that was suggested here How to disable TinyMCE from removing span tags

but i don't believe that ['valid_elements'] = '*[*]'; it's the best and safest option. Also after some search other solutions like add a class in the span or empty spans are stipped off, are not the case here.

So I try to figure out why this happens, or if I miss something.