Пользовательский отступ маркера и встроенная завершающая кнопка в первой строке. ⇐ CSS

[Anonymous]

Описание проблемы
Я реализую собственный текстовый список в виде маркированного списка. Как показано на изображении ниже, кнопка «Дополнительно» должна естественным образом следовать за текстом в первой строке, а настраиваемый маркер должен сохранять отступ.
Нажмите, чтобы просмотреть изображение требований к дизайну.

• Имеет собственный маркер (без использования собственного стиля списка).
• Изначально показывает только первую строку.
• Отображает кнопку «Дополнительно», которая визуально следует за конец первой строки текста
• Расширяется, чтобы показать все строки при нажатии кнопки (кнопка меняется на «Меньше»)

Визуально это работает в текущем пользовательском интерфейсе.

Однако я сталкиваюсь со структурным ограничением в CSS, когда текст занимает несколько строк.

Основная проблема
Когда текст переносится в несколько строк:

• Область маркера имеет фиксированную высоту, из-за чего последующие строки имеют неправильный отступ.
• Маркер не масштабируется по вертикали вместе с текстовым контейнером.

Я попробовал переместить маркер в псевдоэлемент ::before с отступом слева, чтобы исправить отступ. Однако из-за этого кнопка «Дополнительно» перестала естественным образом следовать за потоком текста — она выравнивается по краю контейнера, а не по концу первой строки.

Упрощенная структура

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

Some long text that may wrap into multiple lines depending on viewport width.

More

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

.bullet {
float: left;
width: 12px;
min-height: 20px;
}

.notification_text {
display: inline;
}

Ограничения/Требования

• Кнопка «Дополнительно» должна визуально следовать за концом первой строки текста
• Перенесенные строки должны правильно выравниваться под текстом (без непреднамеренных отступов)
• Положение маркера должно оставаться визуально последовательные
• Расчеты макета JavaScript нежелательны; Предпочтительны решения, ориентированные на CSS

Вопросы

• Существует ли чистый способ CSS заставить пользовательский маркер адаптироваться к полной высоте обернутого текста, сохраняя при этом правильный отступ?
• Как я могу сохранить встроенную кнопку «Дополнительно» в конце первой строки, одновременно позволяя текст для переноса под ним?
• Существуют ли какие-либо устоявшиеся шаблоны CSS (например, использование float, display:contents или shape-outside) для обработки этого пользовательского интерфейса со «встроенной конечной кнопкой»?

Будем признательны за любую информацию или ссылки.

• Вот рабочий вариант демонстрация моего текущего прогресса: https://codepen.io/dreamcode0331/pen/pvbWpGg

Обновление/заключение
После рассмотрения предложений и дальнейшего тестирования я решил запросить проверку дизайна для этого пользовательского интерфейса.
В то время как подход UL/LI (как предложено в ответах) является стандартным, сохранение одной кнопки «Дополнительно» вне списка, заставляя ее следовать за встроенным текстовым потоком первого элемента, оказалось слишком хрупким. Использование ::before для пользовательских маркеров решило проблему с отступом, но последовательно нарушило встроенное позиционирование завершающей кнопки.
Я пришел к выводу, что решение с использованием CSS для этого конкретного требования «встроенная завершающая кнопка с пользовательским отступом» приводит к чрезмерной структурной сложности. Вместо этого я буду искать более удобный для Интернета вариант дизайна. Спасибо всем, кто предоставил информацию!

Подробнее здесь: https://stackoverflow.com/questions/798 ... first-line