Tailwind DaisyUI Drawer function creating seperate list items instead of one item

69 views Asked by At

Im attempting to create a list inside a daisyUI drawer using "justify-between" to separate out the seperate parts of each list element. E.G list element: (Christmas tree £50 On sale).

I tried several methods of doing this, but placing them in individual difs causes them to separate into two list elements: incorrect result I want them to be in the same element, but spaced out according to "justify-between", so having one element at the end and one at the start. Here is my code:

<div className="drawer justify-center">
  <input id="my-drawer" type="checkbox" className="drawer-toggle"/>
  <div className="drawer-content">
    <label htmlFor="my-drawer" className="btn btn-primary drawer-button">
      Problems
    </label>
  </div> 
  <div className="drawer-side w-1/2">
    <label htmlFor="my-drawer" aria-label="close sidebar" className="drawer-overlay"></label>
    <ul className="menu p-4 w-full min-h-full bg-base-200 text-base-content">
      <li className="flex justify-between">
        <div>01</div>
        <div>02</div>
      </li>
    </ul>
  </div>
</div>
0

There are 0 answers