Quiero incluir mi botón - en mi barra gris. Como puede ver en la imagen, mi botón azul supera la barra gris
export default function App() { ... return ( <div className="text-md font-bold"> Invitee {i + 1} <span className="float-right "> {!!i && ( <Button className="rounded-md float-right mt-4" primary onClick={() => removeInvitee(Id)}> - </Button> )} </span> ... )Puede usar las propiedades de flexbox para hacer el diseño que desee. Creé el ejemplo muy similar a continuación, agregue sus funciones aquí y reemplace class con className .
<script src="https://cdn.tailwindcss.com"></script> <div class="container mx-auto py-4"> <div class="bg-gray-200 text-md flex items-center justify-between rounded-r-md"> <div class=" font-bold text-gray-500 ml-4" >Invitee 2</div> <div class=""> <Button primary class="rounded-md bg-black text-white py-2 px-4" onclick="removeInvitee(pId)"> - </Button> </div> </div> </div>