I have a webpage in React Js, in which there is dynamic content which means it can sometimes takes more height than its sidebar which results in ugly pattern in the page. What I want is my sidebar to take the entire height up to the bottom of my page, doesn’t matter how long the content of the page goes. like the color of the sidebar should take the remaining space.

Here are all of my related files:

Sidebar.js:

import React, { useState } from "react";
import sidebarItems from "../data/sidebarItems.json"; // Assuming sidebarItems.json contains your data

const Sidebar = () => {
  const [selectedItem, setSelectedItem] = useState(null);

  const handleItemClick = (item) => {
    setSelectedItem(item);
  };

  return (
    <div className="relative flex h-full w-[16rem] max-w-[20rem] flex-col bg-customblue py-4">
      <div className="flex items-center gap-4 p-4 mb-2">
        <img
          src="../../Logo_white.svg"
          alt="brand"
          className="w-[185px] h-[72px] pl-4"
        />
      </div>
      <nav
        id="sidebar"
        className="flex min-w-[240px] flex-col gap-1 py-2 font-display text-base font-normal"
      >
        {sidebarItems.map((item) => (
          <div
            key={item.text}
            className={`sidebar-item flex items-center w-full p-3 leading-tight transition-all outline-none text-start ${
              selectedItem === item
                ? "bg-selectedbg text-selectedtext border-l-4 border-tilecolor"
                : "text-white hover:bg-hoverbg"
            }`}
            role="button"
            tabIndex={0}
            onClick={() => handleItemClick(item)}
            onKeyDown={(e) => {
              if (e.key === "Enter" || e.key === " ") {
                handleItemClick(item);
              }
            }}
          >
            <div className="grid mr-4 pl-4 place-items-left text-customsize">
              <img
                src={
                  selectedItem === item
                    ? item.imgSrc.replace("_white.svg", "_black.svg")
                    : item.imgSrc
                }
                alt=""
              />
            </div>
            {item.text}
          </div>
        ))}
      </nav>
    </div>
  );
};

export default Sidebar;

App.js:

import React, { useState } from "react";
import Sidebar from "./components/Sidebar";
import Navbar from "./components/Navbar";
import Form from "./components/Form";
import AnalyzingLoader from "./components/AnalyzingLoader";
import RankedResumes from "./components/RankedResumes";
import ProgressMilestone from "./components/ProgressMilestone";
import "tailwindcss/tailwind.css";

function App() {
  const [jobSelected, setJobSelected] = useState(false);
  const [resumeUploaded, setResumeUploaded] = useState(false);
  const [nextClicked, setNextClicked] = useState(false);
  const [extractionCompleted, setExtractionCompleted] = useState(false);

  const handleJobSelect = (event) => {
    setJobSelected(event.target.value !== "Select Job Post");
  };

  const handleFileUpload = (event) => {
    setResumeUploaded(event.target.files.length > 0);
  };

  const handleNextClick = () => {
    setNextClicked(true);
  };

  const handleExtractionComplete = () => {
    setExtractionCompleted(true);
  };

  return (
    <div className="flex h-full bg-white">
      <Sidebar />
      <div className="flex flex-1 flex-col bg-selectedbg">
        <Navbar />
        <ProgressMilestone
          jobSelected={jobSelected}
          resumeUploaded={resumeUploaded}
          nextClicked={nextClicked}
          extractionCompleted={extractionCompleted}
        />
        {!nextClicked && (
          <Form
            onJobSelect={handleJobSelect}
            onFileUpload={handleFileUpload}
            onNextClick={handleNextClick}
          />
        )}
        {nextClicked && !extractionCompleted && (
          <AnalyzingLoader onExtractionComplete={handleExtractionComplete} />
        )}
        {extractionCompleted && <RankedResumes />}
      </div>
    </div>
  );
}

export default App;

Any help would be highly appreciated.

**

NOTE THAT I AM NOT USING PLAIN CSS AT ALL. RATHER, I AM USING TAILWIND CSS ONLY.

**