Right-aligned badge in card footer


Probably another dumb CSS question, but here we go…

I’m trying to place a right-aligned badge inside of a card footer, however it keeps getting cut off by the footer container. This codepen illustrates the issue. Using the clearfix class didn’t helped, barring mistakes on my part.

Is it possible to achieve such an effect without forcing the footer height (which would be a horrible solution, stylistically)? Thanks!


How does this work? You just have to override the default positioning.


I was looking for something similar to this, but without specifying a magic number inside my css file.