How to set conditional props to manage different classes with Typescript

Question

I'm a beginner and I have a question about conditionals. Hope to explain it clearly. So, I have some props and based on different conditionals I want to apply different classes to div elements. I'm pretty sure there is a better way to write it, also it's not working properly because the displayHeader condition is not respected and sometimes when I see the result on Storybook, it mixes classes from different conditions.

Here is my code, hope this makes my question clearer for you to help me.

<div
                className={cx({
                    "px-5 md:pb-5 md:pl-5 md:pr-0 w-full md:grow-0 md:shrink-0 md:basis-3/6":
                        align === "horizontal" &&
                        bodyLayout === "split" &&
                        size === "default" &&
                        displayHeader === true,
                    "px-5 md:pb-5 md:pl-5 md:pr-0 w-full md:grow-0 md:shrink-0 md:basis-2/5":
                        align === "horizontal" &&
                        bodyLayout === "golden" &&
                        size === "default" &&
                        displayHeader === true,
                    "px-5 w-full": align === "vertical" && size === "default" && displayHeader === true,
                    "px-5 pt-5 md:py-5 md:pl-5 md:pr-0 w-full md:grow-0 md:shrink-0 md:basis-3/6":
                        align === "horizontal" &&
                        bodyLayout === "split" &&
                        size === "default" &&
                        displayHeader === false,
                    "px-5 pt-5 md:py-5 md:pl-5 md:pr-0 w-full md:grow-0 md:shrink-0 md:basis-2/5":
                        align === "horizontal" &&
                        bodyLayout === "golden" &&
                        size === "default" &&
                        displayHeader === false,
                    "w-full px-5 pt-5": align === "vertical" && size === "default" && displayHeader === false,

                    "px-6 md:pb-6 md:pl-6 md:pr-0 w-full md:grow-0 md:shrink-0 md:basis-3/6":
                        align === "horizontal" && bodyLayout === "split" && size === "large" && displayHeader === true,
                    "px-6 md:pb-6 md:pl-6 md:pr-0 w-full md:grow-0 md:shrink-0 md:basis-2/5":
                        align === "horizontal" && bodyLayout === "golden" && size === "large" && displayHeader === true,
                    "w-full px-6": align === "vertical" && size === "large" && displayHeader === true,
                    "px-6 pt-6 md:py-6 md:pl-6 md:pr-0 w-full md:grow-0 md:shrink-0 md:basis-3/6":
                        align === "horizontal" && bodyLayout === "split" && size === "large" && displayHeader === false,
                    "px-6 pt-6 md:py-6 md:pl-6 md:pr-0 w-full md:grow-0 md:shrink-0 md:basis-2/5":
                        align === "horizontal" &&
                        bodyLayout === "golden" &&
                        size === "large" &&
                        displayHeader === false,
                    "w-full px-6 pt-6": align === "vertical" && size === "large" && displayHeader === false,
                    hidden: bodyLayout === "no-image",

                    "p-0 w-full md:w-md:grow-0 md:shrink-0 md:basis-3/6":
                        align === "horizontal" && bodyLayout === "split" && cardBackground === "transparent",
                    "p-0 w-full md:grow-0 md:shrink-0 md:basis-2/5":
                        align === "horizontal" && bodyLayout === "golden" && cardBackground === "transparent",
                    "w-full p-0": align === "vertical" && cardBackground === "transparent",

                    "px-5 md:pb-5 md:pl-5 md:pr-0 w-full h-auto md:w-[220px]":
                        align === "horizontal" && bodyLayout === "free-size",
                })}
            ></div>

<div
                className={cx("flex flex-col justify-center self-stretch flex-1", {
                    "px-5 pb-5 pt-3 md:pb-5 md:pr-5 md:pl-4 md:pt-0":
                        displayHeader === true &&
                        align === "horizontal" &&
                        size === "default",
                    "px-5 pb-5":
                        displayHeader === true &&
                        align === "horizontal" &&
                        size === "default" &&
                        bodyLayout === "no-image",
                    "px-5 pb-5 pt-3 md:py-5 md:pr-5 md:pl-4 md:pt-0":
                        displayHeader === false &&
                        align === "horizontal" &&
                        size === "default",
                    "p-5": 
                        displayHeader === false && 
                        align === "horizontal" &&
                        size === "default" && 
                        bodyLayout === "no-image",
                    "px-5 pb-5 pt-3": align === "vertical" && size === "default",

                    "px-6 pb-6 pt-4 md:pb-6 md:pr-6 md:pl-5 md:pt-0":
                        displayHeader === true &&
                        align === "horizontal" &&
                        size === "large",
                    "px-6 md:pb-6":
                        displayHeader === true &&
                        align === "horizontal" &&
                        size === "large" &&
                        bodyLayout === "no-image",
                    "px-6 pb-6 pt-4 md:py-6 md:pr-6 md:pl-5 md:pt-0":
                        displayHeader === false &&
                        align === "horizontal" &&
                        size === "large",
                    "p-6":
                        displayHeader === false &&
                        align === "horizontal" &&
                        size === "large" &&
                        bodyLayout === "no-image",
                    "px-6 pb-6 pt-4": align === "vertical" && size === "large",

                    "pt-3 md:pl-4":
                        align === "horizontal" && cardBackground === "transparent",
                    "pt-3": align === "vertical" && cardBackground === "transparent",
                })}
            ></div>

Not sure if it is helpful but these are the props options:

size?: "default" | "large";
align?: "horizontal" | "vertical";
displayHeader?: boolean;
displayFooter?: boolean;
cardBackground?: "light" | "shade" | "transparent";

type BodyLayout = "split" | "golden" | "no-image";
bodyLayout?: BodyLayout;

Thanks in advance for your help.