When using Tailwind CSS with flexbox, elements do not expand horizontally as expected

Is there a way to prevent the label from expanding along with the description in tailwindcss?

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

<div class="flex items-center">
    <div>block</div>

    <div class="ml-6">
        <p>
            Title
        </p>
        
        <p class="bg-blue-500">
            Description long long long long long long long long long long long long long 
        </p> 

        <div class="px-2 py-1 bg-red-500 rounded-xl text-xs text-gray-700">
            Label...
        </div>
    </div>
</div>

csstailwind-css

Answer №1

Utilize the w-fit class or inline display styles to format the <div ...> Label... as either inline or inline-block

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

<div class="flex items-center">
    <div>block</div>

    <div class="ml-6">
        <p>
            Title
        </p>
        
        <p class="bg-blue-500">
            Description long long long long long long long long long long long long long 
        </p> 

        <div class="px-2 py-1 bg-red-500 rounded-xl text-xs text-gray-700 w-fit">
            Label...
        </div>
    </div>
</div>

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

Determining the pageY value of a div element with overflow-y styling

Currently, I have implemented a script that tracks the mouse's position upon hover. My goal is to integrate this script within a div that has overflow-y: scroll The script currently utilizes pageY which identifies the position relative to the windo ...

javascriptjquerycss

Designing a dynamic button that expands on hover to catch the eye

My instructor has provided us with this code snippet: <a class="btn btn-tertiary" href="#"> <span class="circle"> <i class="arrow-right"> </i> </span>Create profile </a> .btn.bt ...

htmlcss

Unable to modify the CSS properties of the titlebar in jQuery UI dialog

Is there a way to modify the background color of a jQuery UI dialog titlebar? Here is the code I am using: jQuery("#divId").dialog({ title: 'Information' }); jQuery("#divId .ui-dialog-titlebar").css("background-color", "red"); For m ...

jqueryhtmlcssjquery-ui

What is the proper way to showcase the hover effect on a nested ul list item in the DOM?

In an attempt to create a menu, I have written the following code: var sheet_nav = document.createElement('style'); sheet_nav.innerHTML = "nav{ margin: 100px auto; text-align: center;}"; document.head.appendChild(sheet_nav); var sheet_nav_ul = ...

javascripthtmlcssonmouseoveronmouseout

Issue with mobile flipcard: Initial tap is unresponsive

Currently debugging the mobile version of a site built with Next.js. Encountering an issue where the first flip-card tapped on mobile refuses to flip properly. Instead, it selects the text on the opposite side of the card when tapped multiple times. The ...

cssmobiletransformnext.jstransition

I'm having trouble changing the background color on my HTML Bootstrap website. Is there a way to easily add social network buttons as well?

I'm encountering a problem here. One of my friends assisted me with Bootstrap elements for my website, but after switching my site to Bootstrap, I am unable to change the background color on my website. Can someone lend a hand? Much appreciated! Also, ...

csshtmltwitter-bootstrap

Animation effect in Jquery failing to execute properly within a Modal

I have developed a small jQuery script for displaying modals that is both simple and efficient. However, it seems to only work with the fadeIn and fadeOut animations, as the slideUp and slideDown animations are not functioning properly. I am unsure of the ...

javascripthtmljquerycss

Creating a CSS layout with three columns where the first column's width is unspecified and the second

I am looking to create a three column layout with specific width requirements. The first column should adjust based on content, the second column should fill the space between the first and third columns, and the third column should have a fixed width. Add ...

htmlcss

Can you identify the origin of the inclusion of a .php file?

Is there a way to automatically determine if a PHP script is being accessed directly as an HTML page, used as a JavaScript file, or utilized as a CSS Stylesheet? I'm looking for a solution that doesn't involve GET variables or setting a flag wit ...

phpjavascriptcssincludeheader

Learn how to align elements in the Toolbar component using the package "@mui/material" version "^5.11.3"

Recently, I came across this example on their website: https://codesandbox.io/s/0f50jf?file=/demo.js I've been attempting to align all toolbar elements in the center using: sx= {{ justifyContent: 'center', alignItems: 'center&apo ...

cssreactjsmaterial-ui

Tips for avoiding content appearing beneath overlapping elements

I am facing an issue with a hero image that has an overlapping box. I want to add content below the box but it ends up appearing behind the box. How can I ensure that the content shows below the box while maintaining responsiveness? .shell { display: ...

htmlcssflexbox

What could be causing my chessboard to not wrap around properly with flexbox?

I have been working on creating an 8x8 chessboard by following this example: https://codepen.io/sammyslamma/pen/gJeOwY .flex-container { display: flex; flex-flow: row; flex-wrap: wrap; ...

javascripthtmlcssflexbox

Ways to retrieve all elements, including those that are hidden, within a CSS grid

My goal is to retrieve all the "Available Items" using Javascript in one go. However, I am facing an issue where not all of them are visible at once due to the need to manually scroll through a CSS grid. <div class="gridWrapper" data-dojo-attach-point= ...

javascripthtmlcsspython-3.xselenium

What should I name my Bootstrap Modal ID to ensure AdBlock Plus blocks it?

What specific ID should I use to block my Bootstrap Modal with AdBlock Plus? I want AdBlock Plus to block it for users who have it installed and are using it. I don't want to be overly intrusive by trying to circumvent ABP. The only reason I am using ...

jqueryhtmlcsstwitter-bootstrapadblock

Tips for customizing the border radius style of the menu in Vuetify's v-autocomplete component

I am looking to customize the appearance of the drop-down list in the v-autocomplete component by adding a border-radius style, as depicted in the image below. The current design I have achieved closely resembles the visual shown below. Previously, I app ...

javascriptcssvue.jsvuetify.jsv-autocomplete

CSS: Placing a Column below a Float Positioned Column

While performing some maintenance on a website, I noticed that one page is not displaying correctly. There is a container div for a column on the left and a container div for content on the right, both within an overall page content container. Below these, ...

htmlcss

Add a pair of assorted div elements to a shared container

I have two different sections with classes named "red" and "blue". By default, these sections are hidden. I want to duplicate them and display them in a single container named "cont". The red button appends the red section and the blue button appends the b ...

javascriptjqueryhtmlcss

Instructions for connecting a button and an input field

How can I connect a button to an input field? My goal is to make it so that when the button is clicked, the content of the text field is added to an array (displayed below) const userTags = []; function addTags(event) { userTags.push(event.target.__ wha ...

javascripthtmlcssformsform-submit

The HTML element <p> is not spilling over onto a new line

Having trouble with text overflow in a kanban board? I've tried various CSS styling options like overflow-wrap: break-word;, word-wrap: break-word;, and hyphens: auto;, but nothing seems to work. Here's a preview. I'm using Vue.js, but I do ...

htmlcssvue.jsword-wrapkanban

A guide on updating the appearance of a list of comma-separated tags using HTML, CSS, and jQuery

Is there a way to replicate the functionality of the tag section on this website for creating question entries? How can this be achieved? ...

jqueryhtmlcss