Animate height based on content height

I have this simple example, where I am toggling between 10 and 1 items. I want the height change to be animated:

<script setup>
import { ref } from "vue";

const items = ref([1, 2, 3, 4, 5, 6, 7, 8, 8, 9, 0]);
const itemList = ref(items.value);

const toggle = () => {
  itemList.value = itemList.value.length === 1 ? items.value : [items.value[0]];
};
</script>

<template>
  <button class="bg-gray-400 text-white p-2" @click="toggle">Toggle</button>

  <div class="bg-red-100 transition-all m-20 p-4 rounded-md text-center">
    <div v-for="(item, index) in itemList" :key="index">
      {{ item }}
    </div>
  </div>
</template>