How do to customize height to Daisy UI steps?

2k Views Asked by At

I am trying to build a multi step from in react with Daisy UI and tailwind css 3.

I have set up a grid system for the form.

   <div className="grid grid-cols-12  gap-4">
        <div className="col-span-10 grid">
         ....
       </div>
         
        <ul className="steps steps-vertical col-span-2">
          <li className="step step-primary">Basic Details</li>
          <li className="step">Add image</li>
          <li className="step">Confirmation</li>
        </ul>
      </div>

With this the form looks like this. enter image description here

I want the 2 Add image step to be down and not take up equal space. How do I do that in tailwind css?

I tried using grid rows but it breaks the layout. breaking layout

0

There are 0 best solutions below