border-bottom in tailwind css takes length of the parent element

Question

i have a div with a few elements in it, and i want to achieve something like this

however when i add border-bottom to my h5, the border takes the length of the div not the h5 element like so

this is the code or tailwind classes that i have used

     <section>
        <div className='grid md:grid-cols-2 gap-10'>
          <div>
            <h5 className='text-custom-orange font-medium border-solid border-b-2 border-custom-orange'>BLOG'S</h5>
            <h1 className='text-5xl font-medium'>Insights</h1>
            <p>Ut enim ad minim veniam,  laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>
      </section>

Answer 1

Add the max-w-fit utility to your h5.

This way, the maximum width of your h5 element will fit its content.

<section>
  <div class="grid md:grid-cols-2 gap-10">
    <div>
      <h5 class="text-custom-orange font-medium border-solid border-b-2 border-custom-orange max-w-fit">BLOG'S</h5>
      <h1 class="text-5xl font-medium">Insights</h1>
      <p>Ut enim ad minim veniam, laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
</section>

Tailwind-play

---

Another solution is to apply text decoration utilities:

<section>
  <div class="grid gap-10 md:grid-cols-2">
    <div>
      <h5 class="text-custom-orange font-medium underline decoration-gray-300 decoration-2 underline-offset-4">BLOG'S</h5>
      <h1 class="text-5xl font-medium">Insights</h1>
      <p>Ut enim ad minim veniam, laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
</section>

Tailwind-play

1. underline - Add an underline under the text [Docs].
2. decoration-gray-300 - Change the underline color to gray [Docs].
3. decoration-2 - Change the thickness of the underline to 2px [Docs].
4. underline-offset-4 - controls the offset of the text underline [Docs].