Trying to resolve justify position in flex div-CodePudding

I have an issue which happend frequently. here's my code:


<div className="flex flex-col w-full mb-3">
  <div className="flex flex-row w-full">
    {
      Vege &&
        <p className="mr-1 text-sm leading-6 text-green-500">{Vege ? "VÉGÉ • " : ""}</p>
    }
  <p className="font-bold">{Titre}</p>
  <p className="justify-end">{Prix} €</p>
 </div>
 <p>{Description}</p>
</div>

I can't manage to make the p tag including {Prix} € to be at the end of the line. It happends to me on multiple parts of my code... Do you have any idea how to make this work?

lot of search and test, but can't find the right thing to do.

edit: here's a picture of what the code gives me And here's what i want to achieve in this picture

CodePudding user response：

You just need to give the element with the font-bold class the CSS property flex: 1. Provided that all others do not have flex set.

Unfortunately, I can’t tell you which class is responsible for this in tailwind.

CodePudding user response：

@Andrei There are some solutions and you can change like this.

<p className="font-bold flex-auto">{Titre}</p>
<p className="ml-1">{Prix} €</p>

Good luck

CodePudding user response：

you can use the class flex-grow on the previous element (which translates to the CSS: flex-grow:1)

<p className="font-bold flex-grow">{Titre}</p>
<p>{Prix} €</p>

demo: https://livecodes.io/?x=id/d7j5axrx5sy&compiled=open (check the compiled CSS)