demo/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./output.css">
  <title>Demo</title>
</head>
<body>
  <div class="container-type-size w-80 h-80 overflow-auto resize">
    <div class="bg-yellow-100 h-full w-full border-4 border-gray-100 cq-w-22:bg-blue-200 cq-h-[111px]:border-red-400 flex justify-end items-end">
      <div class="inline-flex items-end">
        <div class="pb-12">Resize the container</div>
        <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" fill="white" fill-opacity="0.01"/><path d="M37 19V37H19" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.5441 11.5442L36.9999 37" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </div>
    </div>
  </div>

  <script src="https://unpkg.com/container-query-polyfill/cqfill.iife.min.js"></script>
</body>
</html>