Custom bullet indentation and inline trailing button on the first line

Problem Description

I'm implementing a custom bullet-style text list where each item:

Has a custom bullet (not using native list-style) Shows only the first line initially Displays a “More” button that visually follows the end of the first line of text Expands to show all lines when the button is clicked (button changes to “Less”)

Visually, this works in the current UI.
However, I'm facing a structural limitation in CSS when the text spans multiple lines.

---

Core Issue

When the text wraps into multiple lines:

The bullet area has a fixed height, causing subsequent lines to indent incorrectly. The bullet does not scale vertically with the text container.

I tried moving the bullet to a ::before pseudo-element with padding-left to fix the indentation. However, this caused the "More" button to stop following the text flow naturally—it aligns to the container's edge instead of the end of the first line.

---

Simplified Structure

<div class="notification_box"> <p class="notification_text"> <span class="bullet"></span> Some long text that may wrap into multiple lines depending on viewport width. </p> <button class="btn_toggle_more">More</button> </div> .bullet { float: left; width: 12px; min-height: 20px; } .notification_text { display: inline; }

---

Constraints / Requirements

The “More” button must visually follow the end of the first line of text

Wrapped lines should align correctly under the text (no unintended indentation)

Bullet position must remain visually consistent

JavaScript layout calculations are undesirable; CSS-first solutions preferred

---

Questions

Is there a pure CSS way to make a custom bullet adapt to the full height of wrapped text while maintaining proper indentation?

How can I keep an inline "More" button positioned at the end of the first line while allowing the text to wrap below it?

Are there any established CSS patterns (e.g., using float, display: contents, or shape-outside) to handle this "inline-trailing button" UI?

Any insight or references would be appreciated.

---

Here is a working demo of my current progress: https://codepen.io/dreamcode0331/pen/pvbWpGg