Position Elements within a flex container with predefined widths using tailwind CSS-CodePudding

I am currently having trouble with styling a card component using tailwind CSS.

As you cann see, the prices are not aligned properly - how can I make it aligned?

My current code for the Cards

<div onClick={deleteItem} className="flex flex-row justify-center">
      <div className="bg-gray-100 w-10/12 m-1 rounded p-1 flex justify-between">
        <div>
          <p>{props.itemName}</p>
        </div>
        <div>
          <p>{props.itemPrice} €</p>
        </div>
        <div>
          <p>X</p>
        </div>
      </div>
    </div>

CodePudding user response：

One solution would be, two wrap the itemPrice and X div in another div and give it the class flex. This way would would have two divs, one on the very left, containing the item name, and one on the very right, containing the item price and the x button right next to each other.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y lMz2Mklv18 r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1 68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div >
  <div >
    <div>
      <p>{props.itemName}</p>
    </div>
    <div>
      <div >
        <p>{props.itemPrice} €</p>
        <div>
          <p>X</p>
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

The reason is flex items by default have a flex-basis: auto which means that the item should use its main size initially and flex-grow: 0, which means don't grow or don't take the available space. And what separates them is justify-between by its parent container.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y lMz2Mklv18 r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1 68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div >
  <div >
    <div >
      <p>Salmon Sushi</p>
    </div>
    <div >
      <p>18.99 €</p>
    </div>
    <div >
      <p>X</p>
    </div>
  </div>
</div>

<div >
  <div >
    <div >
      <p>pizza</p>
    </div>
    <div >
      <p>10.5 €</p>
    </div>
    <div >
      <p>X</p>
    </div>
  </div>
</div>

To fix this we will just let the last item which is the X parent container use its initial main size (size can also be defined), then we will distribute the free available space to the first two div containers or items equally.

<script src="https://cdn.tailwindcss.com"></script>

<div >
  <div >
    <div >
      <p >Salmon Sushi</p>
    </div>
    <div >
      <p>18.99 €</p>
    </div>
    <div >
      <p>X</p>
    </div>
  </div>
</div>

<div >
  <div >
    <div >
      <p>pizza</p>
    </div>
    <div >
      <p>10.5 €</p>
    </div>
    <div >
      <p>X</p>
    </div>
  </div>
</div>

By giving flex-basis: 0px; along with the flex-grow: 1 we are able to distribute the available spaces equally.

Additional: For lengthy texts.

<script src="https://cdn.tailwindcss.com"></script>

<div >
  <div >
    <div >
      <p >Salmon Sushiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii</p>
    </div>
    <div >
      <p >18.99 €€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€€</p>
    </div>
    <div >
      <p>X</p>
    </div>
  </div>
</div>

<div >
  <div >
    <div >
      <p>pizza</p>
    </div>
    <div >
      <p>10.5 €</p>
    </div>
    <div >
      <p>X</p>
    </div>
  </div>
</div>