Not long ago, I stumbled upon this fantastic example demonstrating how to incorporate material design elements in buttons.
These buttons are created using a combination of classes that allow for easy customization with just a simple modification. However, I encountered an issue where I wanted the buttons to adjust their width based on the text they display.
Essentially, a button is structured like this:
<div class="button flat">
<div class="center" fit><b>NOT NOW</b></div>
<!--An additional tag included in the [original example][2]-->
<paper-ripple fit></paper-ripple>
</div>
I needed the width of the parent div (with classes "button" and "flat") to adjust based on the text within the inner div (with class "center"). Despite my attempts using CSS alone, I couldn't figure out how to determine the "real width" of the inner div's text or how to wrap it. This led me to a solution involving jQuery/JavaScript. You can view the fiddle here demonstrating that solution.
However, I'm now wondering if it's possible to achieve something similar to this in the JSFiddle, but using only HTML and CSS.
Thank you in advance.