CODEWITHSUNDEEP
csstailwind-css
Jamie
Jamie

Reputation: 10886

Tailwindcss with flexbox do not grow with horizontal description

I'm using tailwindcss. How can I make sure the label is not growing with the description?

<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>

Upvotes: 1

Views: 19

Answers (1)

Madan Bhandari
Madan Bhandari

Reputation: 2184

you can use w-fit or inline display styles to <div ...> Label... like 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>

Upvotes: 2

Related Questions