.euiPageContentHeader {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  // Adjust vertical spacing based on content padding prop
  @each $modifier, $amount in $euiPanelPaddingModifiers {
    .euiPageContent[class*='#{$modifier}'] & {
      margin-bottom: $amount;
    }
  }
}

@include euiBreakpoint('xs', 's') {
  .euiPageContentHeader--responsive {
    flex-direction: column;
    align-items: flex-start;
  }
}