How to do a 2 row text-element with same width but different font-size-CodePudding

I'm currently using tailwind css as a beginner.

What i am trying to do is to have a 2 element on top of each other with the same width but different pixel size.

What i have now is.

If you can't get what i'm trying to do, you can check the attached file.

 <div className="w-full h-screen">
      <div className="max-w-[1500px] px-4 mx-auto h-full">
        <div className="flex h-[700px] ">
          <div className="w-[1000px]  flex flex-col justify-start">
            <div className="">
              <h1 className="w-full font-bold inline border-y-2  ">
                The moon is made
              </h1>
            </div>
            <p className="text-[100px] font-bold ">
              of
              <span className="primary-bg text-[100px] font-bold inline">
                Pancakes.
              </span>
            </p>
          </div>
          <div className="w-[500px]">qwe</div>
        </div>
      </div>
    </div>

And i wanted to achieve is this.

CodePudding user response：

You can do that by choosing the right font-size for every text because the width is depending on the font size I tried to copy the image you provided and made it as simple as I can

check it here : https://play.tailwindcss.com/H4pBcGRvag