Html Question posted in
Some basic documentation can be found here.

Html – 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;
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    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. https://jsfiddle.net/bodsvqp8/

    <div style="display: flex; justify-content: space-between;">
  <span>Title</span>
  <span>Arrow</span>
</div>

    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
Search