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.
I want the 2 Add image step
to be down and not take up equal space. How do I do that in tailwind css?