'How can I align my text and put the button on the extrem right of my gray bar?

how can I display my Invitee2 a bit upper in my gray bar ? And for my button how can I put it on the extrem right side of my gray bar ?

<div className="bg-gray-200 p-5 h-5 pl-2 mb-2 text-md text-primary-500  font-bold  text-gray-500">
Invitee {i + 1}
<span className="float-right -mt-5">
    {!!i && (
        <Button primary className="rounded-md float-right mt-4" onClick={() => removeInvitee(pId)}>
            - Invitee
        </Button>
    )}
</span>

And Button.jsx:

export default function Button({ onClick,primary,children,disabled }) {
    return <button
        onClick={onClick}
        className={`${primary
            ? ' cursor-pointer rounded-md bg-primary-700 py-2 px-3  text-white  hover:bg-blue-700 hover:text-white'
            : 'bg-transparent  text-gray border border-primary-500 hover:border-primary-100 hover:text-primary-100 transition duration-200 '} 
            text-primary-fg py-2 px-3 rounded-md transition-colors `}
        disabled={disabled}
    >{children}</button>
}

Here a picture to get the idea :picture

javascripthtmlcssreactjstailwind-css


Solution 1:[1]

Add flex flex-row justify-between items-center in your div class

and remove the -mt-5 in span class beside float-right

check the code below

<div className="flex flex-row justify-between items-center bg-gray-200 p-5 h-5 pl-2 mb-2 text-md text-primary-500  font-bold  text-gray-500">
Invitee {i + 1}
  <span className="float-right">
      {!!i && (
          <Button primary className="rounded-md float-right mt-4" onClick={() => removeInvitee(pId)}>
              - Invitee
          </Button>
      )}
  </span>
</div>

Solution 2:[2]

You can use the flexbox properties to make the design you want. I had created the very similar example below , please add your functions here and replace class with className.

<script src="https://cdn.tailwindcss.com"></script>
<div class="container mx-auto py-4">
<div class="bg-gray-200 text-md flex items-center justify-between rounded-r-md">
  <div class=" font-bold  text-gray-500 ml-4" >Invitee 2</div>
  <div class="">
    <Button primary class="rounded-md bg-black text-white py-2 px-4" onclick="removeInvitee(pId)">
        - Invitee
    </Button>
  </div>
</div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 VLDCNDN
Solution 2 Mohit Maroliya B17CS036

Related Questions