flowbite Appearance of Toggle element breaks if label has more than 1 line

Describe the bug If the label next to the Toggle element breaks into multiple lines, the appearance of the switch breaks (the handle overflows the switch container).

To Reproduce Steps to reproduce the behavior:

Create one of Flowbite Toggle elements
Add label long enough to break into multiple lines

Expected behavior The toggle should be correctly positioned (on top, in most of the cases)?

Screenshots toggle

Desktop (please complete the following information):

OS: Windows 10
Browser: Chrome
Version: 101.0.4951.54

Possible fix The Toggle <label> element uses the items-center class at the moment. items-start seems to be a better fit.

May 13 '22 12:05 KristianFilo

Hey @TinoArts,

Thanks for the bug report. Looks like we'll need to trade off another div element to wrap the toggle component. I'll look into a solution if possible without adding additional elements.

May 18 '22 09:05 zoltanszogyenyi

You can add a relative properties in the div between the label tag. Like that. I think is currently missing.

<label for="default-toggle" class="inline-flex relative items-center cursor-pointer">
  <input type="checkbox" value="" id="default-toggle" class="sr-only peer"/>
  <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
  <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus venenatis diam eros
  </span>
</label>