Make Title not overflow the panel title

[superdiazzz]

Hi, I have implement this library with this snippet code and the result will be like this. It seems the height of header are static size

<vue-collapsible-panel-group>
            <vue-collapsible-panel>
                <template #title>
                  <div class="flex flex-col">
                    <h3 class="text-lg font-semibold w-full">Kartu Kredit</h3>
                    <p class="text-sm">Visa, Mastercard</p>
                  </div>      
                </template>
                <template #content>
                    <div @click="currentSelect=1; paymentMethod='VC'" class="p-2 m-2 rounded flex justify-between cursor-pointer transform hover:bg-gray-400 hover:text-white">
                      <img class="w-28 object-cover rounded-lg" src="https://firebasestorage.googleapis.com/v0/b/skill-baru.appspot.com/o/general%2Fbank-logo%2Fthumbs%2Fvisa_200x200.png?alt=media&token=17699fc8-7b89-4b03-b857-df878fab2130" alt="kredit">
                      <h2 class="ml-5 text-sm">Kartu Kredit</h2>
                      <svg :class="currentSelect!=1?'text-gray-200': 'text-green-400'" class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    </div>  
                </template>
            </vue-collapsible-panel>
</vue-collapsible-panel-group>

How to reconcile with the header height? Thanks