ref(ui): Tighten up relay CardHeader (#49295)

Before

<img width="1210" alt="image"
src="https://github.com/getsentry/sentry/assets/1421724/2785223b-532b-4ab8-a8f9-4cadb77e927b">


After

<img width="1191" alt="image"
src="https://github.com/getsentry/sentry/assets/1421724/12582897-076d-482e-9329-e86187f9b160">

static/app/views/settings/organizationRelay/list/cardHeader.tsx

@@ -80,9 +80,10 @@ export default CardHeader;
 
 const KeyName = styled('div')`
   grid-row: 1/2;
-  display: grid;
   grid-template-columns: repeat(2, max-content);
-  grid-column-gap: ${space(0.5)};
+  display: flex;
+  gap: ${space(1)};
+  align-items: center;
 `;
 
 const DateCreated = styled('div')`
@@ -99,7 +100,7 @@ const StyledButtonBar = styled(ButtonBar)`
 
 const Header = styled('div')`
   display: grid;
-  grid-row-gap: ${space(1)};
+  grid-row-gap: ${space(0.25)};
   margin-bottom: ${space(1)};
 
   @media (min-width: ${p => p.theme.breakpoints.medium}) {