Vertical spacing between p tags needs to be the same as vertical spacing between p and a tags

The vertical spacing between 2 'p' tags is not the same as the vertical spacing between a 'p' tag and an 'a' tag. How do I update Tailwind CSS so the vertical distance between Tyler Hilbert and Computer Engineering is the same as the vertical distance between Computer Engineering and Linked In?

<div class="py-8 px-8 max-w-sm bg-white rounded-xl shadow-lg space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6 m-4">
    <img class="block mx-auto h-24 rounded-full sm:mx-0 sm:shrink-0" src="../imgs/tyler.jpg" alt="Tyler Hilbert" />
    <div class="text-center space-y-2 sm:text-left">
        <div class="space-y-0.5">
        <p class="text-lg text-black font-semibold">
            Tyler Hilbert
        </p>
        <p class="text-slate-500 font-medium">
            Computer Engineering
        </p>
        <a href="https://www.linkedin.com/in/tyler-hilbert/" class="px-4 py-1 text-sm text-blue-600 font-semibold rounded-full border border-blue-200 hover:text-white hover:bg-blue-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2">Linked In</a>
        </div>
    </div>
</div>

You can add a leading-none to the paragraphs. I would also make the div flex-col and use gap-y to define the space between the rows.

I also think it looks better if the distance between the job title and the button is larger than the space between the name and the job title, so I added a mt-3 class to the a tag. But that was not your question, so you might want to remove that.

<div class="flex flex-col gap-y-1">
          <p class=" text-slate-700 font-semibold text-lg leading-none">
              Tyler Hilbert
          </p>
          <p class="text-slate-400 font-medium leading-none">
              Computer Engineering
          </p>
          
          <a href="https://www.linkedin.com/in/tyler-hilbert/" class="mt-3 px-4 py-1 mx-auto sm:ml-0 max-w-max text-sm text-blue-600 font-semibold rounded-full border border-blue-200 hover:text-white hover:bg-blue-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2">Linked In</a>
        
</div>

Here is a working example in tailwind playground:

https://play.tailwindcss.com/Frw4s4j3wK?layout=horizontal