Materialize: class="right" does not work in collapsible header

[shun-lin]

Hello, I recently updated materialize.css from v0.97.8 to v0.100.1 for my web project, and the below code does not behaves properly:

<div class="collapsible-header"><i class="material-icons">book</i><b>Scholarship America Dream Award</b><div class="right"> National</div></div>

The problem is that <div class="right"> National </div> does not make the word "National" align to the right (I also tried "right-align" with the same result). The other class="right" places in my code behaves correctly (such as in navbar), can anyone helps me? Thank you very much!

[buutqn]

I've just added a "display: block" to the collapsible-header and it worked fine...

[encubos]

Confirmed, same difference in behavior in my code.

As @buutqn suggested, adding "display: block" fixes the position.

[atemiz]

Parent have display: flex and child floating doesn't work until you change that property.

[HIRANO-Satoshi]

class="right" works without the above change now. .collapsible-header seems not display:flex.

.collapsible-header i {
width: 2rem;
font-size: 1.6rem;
line-height: 3rem;
display: block;
float: left;
text-align: center;
margin-right: 1rem;
}

[uok]

I just updated to 0.100.2 and overriding display: block in .collapsible-header fixed this issue

[mozfet]

On v0.100.2: Overriding with .collapsible-header with display: block fixed floating, but the caused the header height to collapse...

Override .collapsible-header with display: block; height: 4em; fixed it for me.