¿Cómo mantener la altura del elemento principal sin cambiar si el niño existe en Tailwind CSS?

Tengo el siguiente código html:

<div id="bar" class="p-4 bg-white">
  <div class="flex justify-between">
    <h3 class="text-2xl font-bold text-left text-black">Users</h3>
    <a class="py-2 px-4 text-sm font-extralight rounded shadow-md focus:outline-none focus:ring-2 focus:ring-opacity-75 bg-blue-500 text-white hover:bg-blue-700 focus:ring-blue-400" href="/admin/users/new">New user</a>
  </div>
</div>

Descubrí que cuando elimino el botón "Nuevo usuario" (etiqueta "a"), la altura del elemento div#bar cambiará un poco más.

ingrese la descripción de la imagen aquí

Después de eliminar el "Botón de nuevo usuario" derecho (etiqueta "a"), la altura del elemento div#bar cambió:

ingrese la descripción de la imagen aquí

Necesito que el elemento div#bar mantenga su altura si existe el botón "Nuevo usuario" del elemento secundario.

Debido a que quiero tener un diseño de página centralizado, algunos de los encabezados de mi página contienen el botón derecho, otros pueden no contener el botón derecho.

¿Cómo evitar que el relleno del elemento secundario afecte la altura real de su padre?

Answer

Puede agregar algo de relleno en el h3para que sea de la misma altura o más grande que el botón, de esa manera agregar el botón no aumentará la altura del contenedor.

O simplemente puede establecer una altura mínima en el contenedor.

Mira este patio de juegos de Tailwind que he hecho

darle una altura mínima principal.

min-h-something