adjust the price to push down to the bottom on mobile

Author: oliverabrahams

dotcom-rendering/src/components/HorizontalSummaryProductCard.tsx

@@ -36,6 +36,8 @@ const imageContainer = css`
 	grid-area: image;
 `;
 const informationContainer = css`
+	display: flex;
+	flex-direction: column;
 	grid-area: information;
 `;
 
@@ -56,7 +58,6 @@ const readMore = css`
 	text-decoration-color: ${palette('--product-card-read-more-decoration')};
 	color: ${palette('--product-card-read-more')};
 	text-underline-offset: 20%;
-	padding-bottom: ${space[2]}px;
 `;
 
 const productCardHeading = css`
@@ -68,7 +69,11 @@ const productNameFont = css`
 	${headlineMedium17};
 `;
 
-const priceFont = css`
+const price = css`
+	margin-top: auto;
+	${from.phablet} {
+		margin-top: 0;
+	}
 	${textSansBold17};
 `;
 
@@ -99,10 +104,10 @@ export const HorizontalSummaryProductCard = ({
 					}}
 				></div>
 				<div css={productNameFont}>{product.productName}</div>
-				<div css={priceFont}>{cardCta.price}</div>
 				<a href={`#${product.h2Id}`} css={readMore}>
 					Read more
 				</a>
+				<div css={price}>{cardCta.price}</div>
 			</div>
 			<div css={buttonContainer}>
 				<ProductLinkButton