skip to Main Content

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'>
    {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' />

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;



  1. Chosen as BEST ANSWER

    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'>
      {showPreview ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}

    The following also worked:

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

    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

  2. I think your flex container needs to be a block element, otherwise it will collapse to the size of the children. Additionally, the inner React elements’ style won’t behave as you expect because they are inside a containing span which will receive adjustment based on the parent’s flex parameterization.

    Here I changed the container to a div and it seems to be working in principle.

    <div style="display: flex; justify-content: space-between;">

    Edit: alternative to using a block container, you could expand the container in a number of ways: use a gap between components, use a min-width, …

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top