JSFiddle - React, Tailwind, and code Playground

HTML

<base href="https://polygit.org/components/">
<link href="polymer/polymer.html" rel="import">
<link href="neon-animation/neon-animation-behavior.html" rel="import">
<link href="neon-animation/neon-animation-runner-behavior.html" rel="import">
<link href="paper-button/paper-button.html" rel="import">

<dom-module id="my-element">    
  <template>
    <div id="container" style="height:100px; background-color:green; color:white;">
      Hello!
    </div>

    <paper-button on-click="_onTestClick">Expand</paper-button>
  </template>
</dom-module>

<my-element></my-element>

JavaScript

Polymer({
      is: 'my-element',
      behaviors: [
        Polymer.NeonAnimationRunnerBehavior
      ],
      properties: {
      	animationConfig: {
        	type: Object,
        	value: function(){
          	return {
            	'expand': {
              	'name': 'grow-height-animation',
                'node': this.$.container
              }
            };
          }
        }
      },
      _onTestClick: function() {
        this.playAnimation('expand');
      }
    });
Polymer({
  is: 'grow-height-animation',
  behaviors: [
    Polymer.NeonAnimationBehavior
  ],
  configure: function(config) {
    var node = config.node;
    var rect = node.getBoundingClientRect();
    var height = rect.height;
    this._effect = new KeyframeEffect(node, [{
      height: (height / 2) + 'px'
    }, {
      height: height + 'px'
    }], this.timingFromConfig(config));
    return this._effect;
  }
});