How can I prevent component from getting smaller?

Question

edit : it is solved when I add a new min-height in pixels, thanks Archit!

here are two different component that are rendered in one div, I don't want component to get smaller when it is changed. How can I fix it ?

codes are here :

 <div class=" flex  shadow-2xl mt-32 bg-white rounded-3xl items-center justify-center mx-16">
          <div class="pt-10">
            <div class="flex ">
              <button
                onClick={() => {
                  setPage(1);
                }}
              >
                <p
                  class={
                    "font-Roboto text-18px ml-6 font-medium text-" +
                    (page === 1 ? "janus-blue" : "kurumsal-gray")
                  }
                >
                  Kurumsal
                </p>
              </button>
              <button
                onClick={() => {
                  setPage(2);
                }}
              >
                <p
                  class={
                    "font-Roboto text-18px ml-4  font-medium text-" +
                    (page === 2 ? "janus-blue" : "kurumsal-gray")
                  }
                >
                  Bireysel
                </p>
              </button>
            </div>
            <div class="flex">
              <div
                class={
                  "h-0.3px  flex-grow bg-" +
                  (page === 1 ? "janus-blue" : "kurumsal-gray")
                }
              ></div>
              <div
                class={
                  "h-0.3px  flex-grow bg-" +
                  (page === 2 ? "janus-blue" : "kurumsal-gray")
                }
              ></div>
            </div>
            <div class="max-w-sign  items-center">{handleSetPage()}</div>
          </div>
        </div>

handlesetpage renders two different components named signin and signup by listening a state.

Answer 1

If the child component is position absolute then it shouldn’t change the size according to my knowledge. But if the position is relative you can solve the problem by adding min-width and height snd max-width and height in pixels. Other than that I don’t have any solutions.