fix(app): Fix intro screen layout with p1k tiprack (#6932)

The p1000 tiprack image is a different size than the other images to
capture the taller tiprack. This means that it would expand the
horizontal layout block. What we really want is pretty fixed-size
blocks, and images that are resized to fit if necessary.

By doing some Messing Around With Flexbox, we can achieve this but it
requires setting an explicit height for the image so the max height
stuff actually works because of the lovely and 100% intuitive tidbit
that max height applies to the parent's defined height not its
max-height, and if you don't have an explicit height defined on the
apparent max-height does
nothing (https://www.w3.org/TR/CSS21/visudet.html#min-max-height).

app/src/components/CalibrationPanels/Introduction.js

@@ -467,24 +467,32 @@ function RequiredLabwareCard(props: RequiredLabwareCardProps) {
       height="30%"
       border={BORDER_SOLID_MEDIUM}
       paddingX={SPACING_3}
+      justifyContent={JUSTIFY_SPACE_BETWEEN}
       alignItems={ALIGN_CENTER}
       marginBottom={SPACING_2}
     >
       <Flex
         paddingY={SPACING_2}
-        maxWidth="30%"
-        flexDirection={DIRECTION_COLUMN}
+        height="6rem"
+        flex="0 1 30%"
         justifyContent={JUSTIFY_CENTER}
+        alignItems={ALIGN_CENTER}
       >
         <img
           css={css`
-            width: 100%;
+            max-width: 100%;
             max-height: 100%;
+            flex: 0 1 5rem;
+            display: block;
           `}
           src={imageSrc}
         />
       </Flex>
-      <Flex flexDirection={DIRECTION_COLUMN} paddingLeft={SPACING_3}>
+      <Flex
+        flexDirection={DIRECTION_COLUMN}
+        paddingLeft={SPACING_3}
+        flex="0 1 70%"
+      >
         <Text fontSize={FONT_SIZE_BODY_2}>{displayName}</Text>
         {linkToMeasurements && (
           <Link