Vue/CSS, how to make a smooth height transition between two alternating elements (Fiddle included)

I'm trying to make two elements that alternate on an opposing v-show predicate to transition between themselves in terms of height, but I'm unable to find a good solution for this. This may be a bit elementary, but I'm inexperienced with transitions/animations, and I can't find any good examples to guide me here.

HTML:

<div id="app">

  <div class="history">
    <p>
    How to make the green bordered area transition smoothly between different height in states A and B?
    </p>
    <div class="placeholder-content">
    </div>
  </div>

  <div class="interaction">
    <button @click="(show_A ? show_A = false : show_A = true);">
      Cycle states
    </button>

    <transition name="swap">
    <div v-show="show_A" class="interaction-A"> A </div>
    </transition>

    <transition name="swap">
    <div v-show="!show_A" class="interaction-B"> B </div>
    </transition>

  </div>
</div>

CSS:

.swap-enter{
}
.swap-leave-to{
}
.swap-enter-active{
}
.swap-leave-active{
}
.swap-move{
}

I've formulated the problem in a fiddle:

https://fiddle.jshell.net/jensmtg/7zun5c9f/