Как выровнять p под h3, сохраняя при этом номер и h3 в одной строке с помощью Tailwind? ⇐ Html

[Anonymous]

Я работаю над проектом, в котором мне нужно разместить три элемента:

• Число внутри красного круга.
• Заголовок , выровненный по той же строке, что и число.
• Элемент , начинающийся непосредственно под < /code> заголовок.
  вот мой код:

Код: Выделить всё

01


Track company wide progress



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!

В настоящее время число и h3 расположены правильно, но начинается элемент p слишком далеко влево.
Как сделать так, чтобы элемент p начинался именно там, где начинается h3?
Вот ссылка на проект:
Frontend Mentor ChallengeВот в чем проблема скриншот::


Я попробовал следующее подходы к правильному выравниванию элемента p под h3:
Добавление отступов или полей: я использовал такие классы, как pl-12 и ml-4, чтобы сместить p элемент.
Обертка в Родительский элемент Div: я добавил дополнительный элемент div для группировки элементов h3 и p и применил к элементу div классы интервалов.
Настройка классов в контейнерах Выше: я попытался изменить space-x-2< /code> и items-center в контейнере, обертывающем число и h3.
Несмотря на эти попытки, элемент p неправильно выравнивается под h3. Я ожидаю, что текст p будет начинаться точно там, где начинается текст h3, сохраняя при этом макет нетронутым.

Подробнее здесь: https://stackoverflow.com/questions/793 ... ing-tailwi