I have two items positioned vertically, and I'd like the narrower one is as wide as the wider one.
My code looks like
<div class="flex flex-col items-end">
  <div>This should take all the space</div>
  <div class="flex flex-row gap-x-4">
    <div> this is the first element</div>
    <div> this is the second element</div>
  </div>
</div>

and produce

However, I would like the result to be

items-end is needed because the items are displayed on the right side of the page.
I have tried to mess with positioning, but I cannot achieve the final result I'm looking for.
Can anyone give me a hand on this?

Give same width to items vertically positioned
You could shrink-wrap the container and then right align it:


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

<div class="flex flex-col w-max ml-auto">
  <div>This should take all the space</div>
  <div class="flex flex-row gap-x-4">
    <div> this is the first element</div>
    <div> this is the second element</div>
  </div>
</div>



You could also use a grid layout with one grid column track sized to max-content and then align the grid column track to the right:


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

<div class="grid grid-cols-[max-content] justify-end">
  <div>This should take all the space</div>
  <div class="flex flex-row gap-x-4">
    <div> this is the first element</div>
    <div> this is the second element</div>
  </div>
</div>



