ModalHeader should have option to position contents in `<header>` tag

[Glidias]

For ModalHeader component, it would be good to have an option to place the contents within the <header> tag of the Modal, currently, it places contents below it which may not be ideal when it comes to space effeicency. For placing within header, apply justify-between to it so that the header text will be on left and close button on right hand side.

export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
  /**
   * Function executed when the dropdown is closed
   */
  onClose: () => void
  /**
   * Defines if the modal is open
   */
  isOpen: boolean
  /**
  * Defines custom child contents to place into header tag of Modal
  */
  header?: React.ReactChild
}

  <header className="flex justify-between">
      <div>{props.header}</div>
      <button
        className="inline-flex items-center justify-center w-6 h-6 text-gray-400 transition-colors duration-150 rounded dark:hover:text-gray-200 hover: hover:text-gray-700"
        aria-label="close"
        onClick={onClose}
      >