Prerequisites

• I understand and accept the project's code of conduct.
• I have already searched in existing issues and found no previous report of this bug.

Describe the bug and add attachments

If any module add text to "carrier-extra-content" via hook "displayCarrierExtraContent", it's not stylled properly. Especially on mobile, it's broken. Check screenshot.
3 problems:
A) it's not aligned properly (because missing "margin: auto;" like for element "delivery-option")
B) unnecessary (not connected) dash to the right
C) it is not indented from the bottom, then it looks like part of the note.

Expected behavior

It must be aligned and working well. There is more options how to fix, but I am not front end developer.

Maybe @tblivet is a suitable candidate for fix (PR)? :)

Steps to reproduce

1. open website https://demo.prestashop.com/#/en/front and click click click to order section "3" - shipping method
2. open JS konzole (F12)
3. fill there "$('.carrier-extra-content').text('Lorem ipsum dolor sit amet.');" and press enter
4. you will see results

You can make module for this purpose as well, but this is faster and easier.

PrestaShop version(s) where the bug happened

8.2.0

PHP version(s) where the bug happened

8.1

If your bug is related to a module, specify its name and its version

No response

Your company or customer's name goes here (if applicable).

https://www.openservis.cz/