I have an element that will look something like this:

I want the white area to be sized specifically to the first element, and the second element to be the “content” area that items could be rendered in

My first attempt looked something like this:

<section class="flex w-screen h-screen">
  <aside class="grid shrink-0 grid-cols-[max-content] grid-rows-[max-content_1fr]">
    <ul></ul>
    <div class="w-0">
      <div class="flex-1"><!-- content --></div>
    </div>
  </aside>
  <main class="grow"></main>
</section>

However, I can’t seem to get a content area that renders as the width of the above bar

Any ideas on how this would be done?

Tailwind playground:

https://play.tailwindcss.com/5QyNkEAgtc