Attempting to address the issue of aligning items within a flexible div container

I seem to be encountering a recurring issue in my code. Here is an example:


<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 am struggling to align the p tag containing {Prix} € at the end of the line. This issue seems to occur multiple times throughout my codebase. Any suggestions on how to resolve this?

I have conducted numerous searches and tests, but have been unable to find the correct solution.

edit: Here is a screenshot demonstrating the current output of the code. And here is the desired outcome shown in this image

Answer №1

In order to assign the CSS property flex: 1 to the element containing the font-bold class, ensure that no other elements have the flex property set.

Regrettably, I am unable to pinpoint the specific class responsible for this in Tailwind CSS.

Answer №2

@Andrei Here are a few options for making changes:

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

Wishing you success!

Answer №3

Utilize the flex-grow class on the preceding element (equivalent to the CSS: flex-grow:1)

<p className="font-bold flex-grow">{Title}</p>
<p>{Price} €</p>

See it in action here: (examine the compiled CSS)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Anticipated a task or function invocation but encountered an expression instead: no expression left idle

import Alert from '@material-ui/lab/Alert'; export default function MyComponent(props) { let [disabled] = useState(false); const calculateTotal = event => { if (!disabled) { disabled = true; calTotal().then(vali ...

What is the method to modify a section of a URL based on form input?

I am currently developing a website that allows users to interact with product images by clicking buttons, entering text into forms, and using a slider to view different angles of the product. My main goal is to extract user input from form fields and dyn ...

Having trouble aligning photos in the grid

I am facing an issue aligning my menu and image grid. The grid is inline-block but the first item stays stuck in the upper right-hand corner no matter what I do, without affecting the navigation menu placement. Additionally, when testing locally, everythin ...

I'm experiencing an issue with the button not working when I switch to Tablet or Mobile size. How can I go about resolving this problem

<!-- Navigation Bar --> <nav class="navbar navbar-expand-lg navbar-dark"> <a class="navbar-brand" href="">tindog</a> <button class="navbar-toggler" type="button" data-bs-togg ...

What are the differences between babel-eslint, eslint-plugin-babel, and eslint-plugin-react?

Can you explain the distinctions between these libraries? babel-eslint [github.com/babel/babel-eslint] eslint-plugin-babel [github.com/babel/eslint-plugin-babel] eslint-plugin-react [github.com/yannickcr/eslint-plugin-react] ...

Adjust the position and size of an image by hovering over it with your

I'm currently working on implementing a button menu for my website, but I'm facing an issue with the hover effect on images. You can check out what I've done so far at http://jsfiddle.net/tNLUx/ What I want to achieve is when hovering over ...

"Using Selenium in Python to navigate Google's search results and view the

Hello, I am new to using selenium and I have a specific task in mind. I would like to scrape the address search results from Google that are displayed on the sidebar column. I have successfully managed to use selenium to conduct searches on Google and land ...

Using CSS to center the div and align its son on the left

I am struggling to align the elements in my HTML and CSS prototype. This image shows what I am trying to achieve. I attempted to use display: flex and justify content: center to center the main div. However, I encountered difficulties in positioning the p ...

Is the Navbar moving off-center and the Bootstrap sign-in demo looking funky on Flask? Need any solutions?

The positioning of the Navbar has been altered to the left, causing distortion in the login items, which is an example of Bootstrap implementation. In my login.html file, I have utilized the Bootstrap sign-in example. Strangely, only on this specific page ...

Tips for transforming code with the use of the then block in javascript, react, and cypress

In my code snippet below, I have several nested 'then' clauses. This code is used to test my JavaScript and React code with Cypress. { export const waitForItems = (retries, nrItems) => { cy.apiGetItems().then(items => { if(items ...

Avoiding conflicts between API calls in React's ComponentDidMount and ComponentDidUpdate phasesNote: The original text does not provide

When using the componentDidMount lifecycle method, I fetch data using a Redux action as shown below: componentDidMount() { let parameter = some code; this.props.getAction(parameter).then(r => { if(r.type.endsWith('SUCCESS')){ ...

What is the best way to display a unique image in a div based on the size of the

Being new to web design, I have a question about creating a webpage with a large image in the center like on GitHub's Windows page. How can I work with the image inside that particular div or area based on different screen sizes? Is it possible to mak ...

Refresh content on an HTML page using information retrieved from an external PHP post request

So, I have a problem with communication between my two web pages - mobile.html and video.php. The idea is for mobile.html to send an AJAX post request containing a single variable to video.php. Video.php should then read this variable and pass it to a Java ...

Highlight the parent name in the menu when I am on the corresponding child page

Here is a snippet of a recursive function: function recursive($arrays, $out) { if (is_array($arrays)){ //$out .= "<ul>"; foreach($arrays as $parent => $data) { //if parent is empty if ($parent === '') { ...

tips on adjusting images to the size of the screen without them being on html files

I understand that sharing links may not be appropriate for this forum, but I'm unsure how else to seek assistance. My apologies for any inconvenience. I am currently working on a website for a doctor, and the image you see is of a patient. I'm ...

What is the process for marking a form field as invalid?

Is it possible to validate the length of a field after removing its mask using text-mask from here? The problem is that the property "minLength" doesn't work with the mask. How can I mark this form field as invalid if it fails my custom validation met ...

Picture appears to be off-center

I created a loginPage.php file with the following content: <?php //some php stuff ?> <!DOCTYPE html> <html> <head> <title>Login Form Design</title> <link rel="stylesheet" type="text/css" href="stylelogin.c ...

Having trouble accessing certain nodes while extracting HTML text with R

I have numerous water extraction permits that are accessible online and I am looking to extract specific data from them. For example url <- "https://www.ecan.govt.nz/data/consent-search/consentdetails/CRC000002.1" While I don't have a strong know ...

When the window is resized, the div containing a table is getting pushed beyond its original

I have been developing a 'calculadora de creditos' or credits calculator. For this project, I used a responsive layout. Despite searching extensively online for solutions to my issue, I came up empty-handed. CSS CODE: (CSS code here) HTML CO ...

What is the process for integrating three.js code manually into an iframe?

I recently posted a question on Stack Overflow inquiring about how to input code into an iframe without using a file or URL. While I was successful with simple cases like <h1>Hello World</h1>, my ultimate goal is to integrate three.js into thes ...