I am trying to use Tailwind CSS to align some text within the border of another element, so that the border around my element draws a perimeter around the element, and has a break with the text in the center top of the border.

This is being done within a React component.

I am very new to Tailwind CSS. So new, in fact, that my desired goal comes from the following StackOverflow Question, but the solutions provided there do not appear to work.

I have tried the following:

• Adding mt-5 or pd-5 to both the class for the h2 and span elements for my label, in an effort to add a margin to move the label down into the border, but this does not seem to work.
• Wrapping the h2 element containing the span element in a div and applying mt-5 or pd-5 to that, but that also did not work.
• I've also tried editing the margin in-browser via the Chrome Development tools, but that did not help.

My Code:

export default function Skills() {
    return (
        <section id="skills">
            <div className="container px-5 py-10 mx-auto">
                <div className="pt-3">
                    <h2 className="w-full text-center leading-border-text mt-5">
                        <span className="text-sm font-medium">My desired label</span>
                    </h2>
                    <div className="flex flex-wrap px-5 pb-5 pt-4 border-b border-t border-r border-l border-gray-600 rounded-md">
                        Some content here.
                    </div>
                </div>
            </div>
        </section>
    );
}

The leading-border-text TailwindCSS class is one that I have defined in my tailwind.config.js to simply add a custom line height of 0.1.

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      lineHeight: {
        'border-text': '0.1'
      }
    },
  },
  plugins: [],
}

This is what my code currently renders:

And I'd like for that text, My desired label to be in-line with the border just below it.

What am I doing wrong?