JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/vue/1.0.24/vue.js"></script>
<div id="demo">
  <div id="panel1">
    <div class="relative">
      <ul id="floating-panel">
        <li v-for="item in list | filterBy query"
            transition="staggered"
            stagger="100">
          {{item.msg}}
        </li>
      </ul>
    </div>
  </div>
  <div id="panel2">
    <ul id="floating-panel">
      <li v-for="item in list | filterBy query"
          transition="staggered"
          stagger="100">
        {{item.msg}}
      </li>
    </ul>
  </div>
</div>

CSS

*{
  margin: 0; 
  padding: 0;
}

#panel1 {
  height: 100px;
  background-color: lightgrey;
  overflow: auto;
}

#panel2 {
  height: 100px;
  background-color: aliceblue;
  overflow: auto;
}

#floating-panel {
  position: absolute;
  background-color: red;
}

.relative {
  position: relative;
}

ul {
    padding-left: 0;
    font-family: Helvetica, Arial, sans-serif;
}
.staggered-transition {
    transition: all .5s ease;
    overflow: hidden;
    margin: 0;
    height: 20px;
}
.staggered-enter, .staggered-leave {
    opacity: 0;
    height: 0;
}

JavaScript

new Vue({
    el: '#demo',
    data: {
        query: '',
        list: [
            { msg: 'Bruce Lee' },
            { msg: 'Jackie Chan' },
            { msg: 'Chuck Norris' },
            { msg: 'Jet Li' },
            { msg: 'Kung Fury' }
        ]
    }
})