JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="app">
  <div class="wrapper">
    <transition-group name="fade">
      <div v-if="switc" key="dynamic" class="animated">
        <div style="background-color: pink; padding: 20px; margin-bottom: 20px;">
          <p>
            Text that could be of any length because it comes from a database.
          </p>
          <textarea style="resize: vertical;">
            Textarea that the user can resize
          </textarea>
        </div>
      </div>
      <div key="main-content" class="animated">
        <button type="button" class="btn btn-secondary" @click="switc = !switc">
          <span>Switch</span>
        </button>
      </div>
    </transition-group>
  </div>
</div>

CSS

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.fade-enter,
.fade-leave-active {
    opacity: 0;
    transform: translateY(-10px);
}
.fade-leave-active {
    position: absolute;
}
 
.animated {
  transition: all 0.5s;
  display: flex;
  width: 100%;
}

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    switc: false
  }
})