Tailwind, Vue problem with non-English characters when using tags right after eachother

Question

I am facing an issue when using tags right after eachother(ex: span , 'a' and 'p'). characters merge with each other, although they are in seperate html tags!

How can I prevent that from happing?

    <a href="" class="underline mx-1">حریم شخصی</a>
    <a href="">استفاده</a>

    <span>حریم</span>
    <span>استفاده</span>
    <span>حریم</span>

Codepen : https://codepen.io/blackcrowxyz/pen/jOZOZoR

What I want:(استفاده حریم is right)

What I get:(استفادهحریم is wrong)

sample output:

Answer 1

The solution is to use   because every character in between tags, will prevent the issue from happening.

    <span>قوانین و شرایط استفاده</span>
    &nbsp;
    <span>حریم شخصی</span>

result:

Answer 2

Is this the way you want?

Using flex

 <script src="https://cdn.tailwindcss.com"></script> <div class="p-4 w-64 flex justify-between"> <span><a href="#"> قوانین و شرایط استفاده </a></span> <span><a href="#">حریم شخصی</a> </span> </div>

Using margin

 <script src="https://cdn.tailwindcss.com"></script> <div class="p-4"> <span><a href="#" class="ml-5"> قوانین و شرایط استفاده </a></span> <span><a href="#">حریم شخصی</a> </span> </div>