Html Question posted in
Some basic documentation can be found here.

Html – How to align p under h3 while keeping number and h3 in the same row using Tailwind?

I’m working on a project where I need to position three elements:

  1. A number inside a red circle.
  2. An <h3> header aligned on the same row as the number.
  3. A <p> element starting directly below the <h3> header.
    here is my code:
<div class="rounded-l-full bg-brightredsuplight md:bg-transparent">
  <div class="flex flex-col space-y-4">
    <div class="flex items-center space-x-2">
      <div class="px-4 py-2 text-white bg-brightred rounded-full md:py-1">
        01
      </div>
      <h3 class="text-base text-verydarkblue font-bold md:mb-4 md:hidden">
        Track company wide progress
      </h3>
    </div>
    <p class="text-darkgrayishblue pl-12">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis
      voluptatibus ea ab ullam esse animi vel eius sint laboriosam natus
      et ex accusamus, at ipsa voluptates! Voluptatem illum molestias eaque!
    </p>
  </div>
</div>

Currently, the number and h3 are positioned correctly, but the p element starts too far left.
How can I make the p element start exactly where the h3 starts?

Here’s the project link:
Frontend Mentor Challenge

Here’s the issue screenshot::

I tried the following approaches to align the p element under the h3 correctly:

Adding Padding or Margin: I used classes like pl-12 and ml-4 to shift the p element.

Wrapping in a Parent Div: I added an extra div to group the h3 and p elements and applied spacing classes to the div.

Adjusting Classes in Containers Above: I tried modifying the space-x-2 and items-center on the container wrapping the number and h3.

Despite these attempts, the p element doesn’t align correctly under the h3. I’m expecting the p text to start exactly where the h3 text starts while keeping the layout intact.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I just wanted to update everyone: The issue was caused by a margin: 0 style applied to the <p> element in the main.css file. Once I removed that, everything aligned perfectly, with the <p> starting below the <h3> and the number and <h3> remaining in the same row.

    Thanks to everyone for the suggestions!


  2. 0

    Why misalign the p element though? You can just absolutely position the number relative to the h3, then set a negative left position on it. E.g:

     <div class="flex items-center space-x-2">
   <h3 class="relative flex items-center text-base text-verydarkblue font-bold md:hidden">
    <span class="absolute -left-6 px-4 py-2 text-white bg-brightred rounded-full md:py-1">0</span>
    Track company wide progress
  </h3>
 </div>
 <p class="md:mt-4 text-darkgrayishblue">Lorem ipsum dolor…</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search