Side panels that sit "on the floor" and don't get shorter than the available space

newtonian-side-panels.html

<!-- Newton... gravity... ¯\_(ツ)_/¯ -->
<!-- Test on https://play.tailwindcss.com/ -->

<div class="relative flex h-full w-full bg-purple-950">
  <!-- Header -->
  <div class="fixed inset-x-0 top-0 h-[60px] bg-purple-50 p-4">Header</div>

  <!-- Sidebars -->
  <div class="flex min-h-screen w-full items-end justify-between px-6 py-[80px]">
    <div class="w-2/6 overflow-auto bg-purple-200 p-4 h-[clamp(12rem,24rem,calc(100vh-120px))]">
      <h1 class="mb-2 font-bold">Sidebar</h1>
      <p class="my-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis ultrices ligula. Donec in leo neque. Etiam quis neque nunc. Donec finibus nibh nisi, eget fermentum nulla tempor eu. Nunc vel lacus in nisl pellentesque tempus. Vestibulum tincidunt gravida volutpat. Sed volutpat venenatis nisi, eget tempor eros volutpat eget. </p>
<p class="my-4">Aenean id lectus odio. Nam iaculis, dui et consequat auctor, tortor justo cursus neque, nec accumsan dui nisl a magna. Mauris commodo rutrum dui sed viverra. Morbi feugiat sapien eget tempus varius. </p>
<p class="my-4">Integer porta tortor in mauris tincidunt sagittis. Fusce ut lectus luctus, tempor arcu tempus, semper quam. In hac habitasse platea dictumst. Mauris convallis fermentum nisl, vel dapibus augue lobortis ac. Sed sed aliquet mi. In sagittis molestie lectus nec auctor. Vestibulum venenatis viverra tellus.</p>
<p class="my-4">Nulla condimentum purus non consequat vehicula. Proin vitae eros nec magna viverra sollicitudin nec sit amet lacus. Suspendisse potenti. Nullam elementum, neque eu posuere vehicula, orci mi commodo ex, eu pellentesque libero purus quis orci. Nullam facilisis aliquet odio in venenatis.</p>
    </div>
    <div class="w-2/6 overflow-auto bg-purple-200 p-4 h-[clamp(12rem,24rem,calc(100vh-120px))]">
      <h1 class="mb-2 font-bold">Sidebar</h1>
      <p class="my-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis ultrices ligula. Donec in leo neque. Etiam quis neque nunc. Donec finibus nibh nisi, eget fermentum nulla tempor eu. Nunc vel lacus in nisl pellentesque tempus. Vestibulum tincidunt gravida volutpat. Sed volutpat venenatis nisi, eget tempor eros volutpat eget. </p>
<p class="my-4">Aenean id lectus odio. Nam iaculis, dui et consequat auctor, tortor justo cursus neque, nec accumsan dui nisl a magna. Mauris commodo rutrum dui sed viverra. Morbi feugiat sapien eget tempus varius. </p>
<p class="my-4">Integer porta tortor in mauris tincidunt sagittis. Fusce ut lectus luctus, tempor arcu tempus, semper quam. In hac habitasse platea dictumst. Mauris convallis fermentum nisl, vel dapibus augue lobortis ac. Sed sed aliquet mi. In sagittis molestie lectus nec auctor. Vestibulum venenatis viverra tellus.</p>
<p class="my-4">Nulla condimentum purus non consequat vehicula. Proin vitae eros nec magna viverra sollicitudin nec sit amet lacus. Suspendisse potenti. Nullam elementum, neque eu posuere vehicula, orci mi commodo ex, eu pellentesque libero purus quis orci. Nullam facilisis aliquet odio in venenatis.</p>
    </div>
  </div>

  <!-- Footer -->
  <div class="fixed inset-x-0 bottom-0 h-[60px] bg-purple-50 p-4">Footer</div>
</div>