Show / Hide alignment (#13252)

* tweak css so that we only add space between when there are 2 or more visible children

* Add gap sizing between section controls

* Only reserve space when there are buttons

* Add margin bottom show hide to align with nav buttons and section header

dotcom-rendering/src/components/FrontSection.tsx

@@ -288,8 +288,9 @@ const sectionControls = css`
 		flex-direction: column-reverse;
 		justify-content: flex-end;
 		align-items: flex-end;
-		/** we want to add space between the items in the controls section only when both items are there and visible */
-		:has(.carouselNavigationPlaceholder:not(.hidden)) {
+		gap: ${space[2]}px;
+		/* we want to add space between the items in the controls section only when there are at least 2 children and neither are hidden */
+		:has(> :not(.hidden):nth-of-type(2)) {
 			justify-content: space-between;
 		}
 	}
@@ -410,7 +411,7 @@ const secondaryLevelTopBorder = css`
 `;
 
 const carouselNavigationPlaceholder = css`
-	${until.leftCol} {
+	${between.tablet.and.leftCol} {
 		min-height: 44px;
 	}
 	.hidden & {

dotcom-rendering/src/components/ShowHideButton.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { textSans14 } from '@guardian/source/foundations';
+import { space, textSans14 } from '@guardian/source/foundations';
 import { ButtonLink } from '@guardian/source/react-components';
 import { palette } from '../palette';
 
@@ -10,9 +10,9 @@ type Props = {
 
 const showHideButtonCss = css`
 	${textSans14};
-	margin-right: 10px;
+	margin-right: ${space[2]}px;
+	margin-bottom: ${space[2]}px;
 	position: relative;
-	align-items: bottom;
 	text-decoration: none;
 	&.hidden {
 		display: none;