Make all <span> inline with Popover.Trigger

[phaminhieuu]

Hi everyone,
I have multiple spans inside a p tag. I would like to add Popover for each span like this:

<p className='w-52 overflow-hidden'>
   <Popover.Root>
    <Popover.Trigger asChild>
       <span>Build fully functional accessible web applications faster than ever</span>
    </Popover.Trigger>
    <Popover.Portal>
      <Popover.Content>
        Something
      </Popover.Content>
    </Popover.Portal>
  </Popover.Root>

  <span>, </span>

  <Popover.Root>
    <Popover.Trigger asChild>
       <span>Includes more than 100 customizable components and 50 hooks</span>
    </Popover.Trigger>
    <Popover.Portal>
      <Popover.Content>
        Something
      </Popover.Content>
    </Popover.Portal>
  </Popover.Root>
</p>

The problem is that when the content in the first span longer than width, span will be break and make the new line like this:

but I want all the spans inline like this:

I'm using tailwindcss and Nextjs. I have put 'inline' css into all spans but didn't work. Any idea for this ? Thank you so much

[joaom00]

Maybe something with your CSS. It works here https://codesandbox.io/p/sandbox/wizardly-thompson-twfw4w