JSFiddle - React, Tailwind, and code Playground

by WoJWoJ

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<div id="root">
  <div id="square" :style="{height: h+'px'}">
    x
  </div>
  <div id="text">
    {{growingText}}
  </div>
</div>

CSS

div[id="root"] {
  border-style: solid;
  border-width: 2px;
}

div[id="square"] {
  background-color: blue;
  color: white;
}

JavaScript

var vm = new Vue({
  el: "#root",
  data: {
    growingText: ''
  },
  watch: {
    growingText: function() {
      document.getElementById("square").style.height = document.getElementById("text").offsetHeight + 'px';
    }

  }
})

setInterval(
  function() {
    Vue.nextTick(function() {
      vm.growingText = vm.growingText + 'hello world ';
    })
  },
  500
)