Badge without margin-left in a collapsible

[Raphaël Odini]

Before submitting...

• I have searched for duplicate or closed issues.
• I have read the CONTRIBUTING document and my issue is following the guidelines.
• I have read the template completely before filling it in.

Context

Currently, badges are always pulled to the right in a collapsible.

It would be great to have an option (a class to add ?) to have it next to the text instead.

materialize/dist/css/materialize.css

Line 3238 in 2bfba64

 .collapsible span.badge { 

Current Behavior

Example in a collapsible-header

<div class="collapsible-header">
    <i class="material-icons">chat_bubble_outline</i>Notes
    <span class="badge teal white-text">{{ member.notes | length }}</span>
</div>

Expected behavior

I added some extra style to have this behavior

<div class="collapsible-header">
    <i class="material-icons">chat_bubble_outline</i>Notes
    <span class="badge teal white-text" style="margin-left:14px;">{{ member.notes | length }}</span>
</div>

Possible Solutions or Causes

Not really sure what the ideal solution could be

• maybe a left class that disables the margin-left: auto ?
• or a right class that adds the margin-left: auto ?

Thanks 🙏

Your Environment

• Version used: 1.2.2
• Browser Name and version: Brave 1.57.47
• Operating System and version (desktop or mobile): Ubuntu 22.04.03
• Additional information you want to tell us: