Search code examples
htmlcssnext.jstailwind-cssalignment

Justify Content Space Between Two Spans in Tailwind

enter image description here

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.

enter image description here

<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;
Solution

  • The following (explicitly setting a width for the parent so that it takes up all available space) worked:

    <span className='flex justify-between w-full text-xl'>
  {title}
  {showPreview ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</span>

    The following also worked:

    <div className='flex justify-between w-full text-xl'>
  {title}
  {showPreview ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</div>

    But the suggestion to convert the parent from to alone did not work.

    That being said, does anyone have an argument for whether "semantically" this ought to be a or a ? My initial inclination is a because the content is all inline, but I'm curious to hear other opinions.

    enter image description here