Make all children the same height inside a flexBox

I have a flexBox which has 2 children. 1 child is just an icon and it doesnt seem to take up the same height as the other child. Please advice me on a way to fix this.

Playground URL:URL

import React from "react";
import "./styles.scss";
import styled from "styled-components/macro";
import { Button, Card, Colors, Icon } from "@blueprintjs/core";
import { IconNames } from "@blueprintjs/icons";
import { Box, Flex } from "@rebass/grid";
import cx from "classnames";

const CustomIcon = styled(Button)`
  transition: all 0.2s ease;
}
`;

function App() {
  return (
    <Flex>
      <Box width={"90%"}>
        <Card
          interactive={true}
          className={cx({ selected: true, muted: true })}
        >
          <Flex alignItems="center">
            <Box mr={2} css={{ minWidth: 0 }}>
              Sample
            </Box>
            <Box flex="auto" />
            <Box flex="none">
              <CustomIcon
                className="utility-button"
                icon={<Icon icon={IconNames.EDIT} />}
                minimal={true}
                title="Edit scenario"
              />
              <CustomIcon
                className="utility-button"
                icon={<Icon icon={IconNames.DUPLICATE} />}
                minimal={true}
                title="Copy scenario"
              />
              <CustomIcon
                className="utility-button"
                icon={<Icon icon={IconNames.DOCUMENT_SHARE} />}
                minimal={true}
                title={"Transfer"}
              />
              <CustomIcon
                className="utility-button"
                icon={<Icon icon={IconNames.TRASH} color={Colors.RED1} />}
                minimal={true}
                title="Delete scenario"
              />
            </Box>
          </Flex>
        </Card>
      </Box>
      <Box width={"10%"}>
        <Card>
          <Icon icon={IconNames.CHEVRON_RIGHT} />
        </Card>
      </Box>
    </Flex>
  );
}

export default styled(App)`
  &.selected {
    box-shadow: inset 0 1px 0 #137cbd, inset 0 -1px 0 #137cbd,
      inset 1px 0 0 #137cbd;
  }
  &.muted {
    opacity: 0.5;
    .utility-button {
      pointer-events: none;
    }
  }
  &:not(:hover):not(.selected) {
    .utility-button {
      opacity: 0;
      pointer-events: none;
    }
  }
`;

This is my result:

I want the second child to be as the same height as the first child. Please advice.

Solution

first of all, your icons should be the same size,
set the width and height of the icon wrapper layer,
reset the icon's line-height.

.utility-button{
  flex: none;
  width: 44px;
  height: 44px;
  line-height: 44px;
  text-align: center;
}

.utility-button .icon {
  font-size: 1em;
}