As you can see in the code snippet below, I have tried all 6 of Tailwind’s justify and align content, items, and self properties as well as flex justify-between on the parent and still not managing to get the desired ‘space-between’ outcome so that the ArrowIcon is pushed to the far right end like the image below.

<span className='text-lg flex justify-between'>
  <span>{title}</span>
  <span>
    {showPreview ? (
      <KeyboardArrowUpIcon className='justify-end justify-self-end justify-items-end content-end items-end self-end' />
    ) : (
      <KeyboardArrowDownIcon className='justify-end justify-self-end justify-items-end content-end items-end self-end' />
    )}
  </span>
</span>

Perhaps I am just overlooking some basic HTML or CSS issue, but I don’t remember having this much difficulty trying to accomplish this without Tailwind, so my initial inclination is to assume it is Tailwind-related. BTW, this is a Next.js project and the following are currently applied in the globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;