I'm wrinting a digital menu for a restaurant using tailwind so i have this
`<div class="flex gap-2 m-4 items-center">
<h3 class="text-lg font-semibold my-2 leading-5">Hamburger</h3>
<div class="grow bg-violet-950 h-0.5"></div>
<p>$8.99</p>
</div>
<p class="ml-5 mr-16 -mt-4 text-sm text-justify">Served with tomato, letuce and french fries</p>`
So far so good, but when i have an item with a larger name (lets asy Cheeseburger with pineapple and bacon), then the h3 occupies all of the width of the row but the price and i no longer have a line (the div with the grow class) to show up even though the h3 text wraped to a second line and should be smaller. Or shouldn't it? how can i properly size my elemnts here?
I tried adding the max-width-2/33 (is set to 70%) to force the h3 to pull back and i got a bit of a line with this walk around, but i would like to make the h3 to just occupy the 2 text lines lenght so the div line is longer. I don't mind the text being in 2 lines.
`<div class="flex gap-2 m-4 items-center">
<h3 class="text-lg font-semibold max-w-2/33 my-2 leading-5">Hamburger</h3>
<div class="grow bg-violet-950 h-0.5"></div>
<p>$8.99</p>
</div>
<p class="ml-5 mr-16 -mt-4 text-sm text-justify">Served with tomato, letuce and french fries</p>`
the h3 occupies all of the width of the row but the price and i no longer have a line (the div with the grow class) to show up even though the h3 text wraped to a second line and should be smaller. Or shouldn't it?
The <h3> element will take up as much width as it can, then any text that overflows would wrap. The width of the <h3> then doesn't "backtrack" to the width where the wrapping occurs.
You could consider setting a flex-basis on the line element to give it an equivalent of a "minimum width" to display:
<script src="https://cdn.tailwindcss.com/3.3.2"></script>
<div class="w-96">
<!-- before -->
<div class="flex gap-2 m-4 items-center">
<h3 class="text-lg font-semibold my-2 leading-5">Cheeseburger with pineapple and bacon</h3>
<div class="grow bg-violet-950 h-0.5"></div>
<p>$8.99</p>
</div>
<p class="ml-5 mr-16 -mt-4 text-sm text-justify">Served with tomato, letuce and french fries</p>
<!-- after -->
<div class="flex gap-2 m-4 items-center">
<h3 class="text-lg font-semibold my-2 leading-5">Cheeseburger with pineapple and bacon</h3>
<div class="grow bg-violet-950 h-0.5 basis-40"></div>
<p>$8.99</p>
</div>
<p class="ml-5 mr-16 -mt-4 text-sm text-justify">Served with tomato, letuce and french fries</p>
</div>