Vertically center radio button - React and Bootstrap - css

Question

I have a container hosting a radio button on the left and other buttons on the right. For some reason, I am unable to align the radio buttons inline with the buttons on the right. Please advice me on a way to fix this.
This is what I have so far:
Code:
import React, { Component } from "react";
import { Box, Flex } from "#rebass/grid";
import cx from "classnames";
import styled from "styled-components/macro";
import {
Button,
ButtonGroup,
Classes,
Colors,
Divider,
Icon,
Radio,
RadioGroup
} from "#blueprintjs/core";
import { IconNames } from "#blueprintjs/icons";
import "normalize.css/normalize.css";
import "#blueprintjs/core/lib/css/blueprint.css";
import "#blueprintjs/icons/lib/css/blueprint-icons.css";
import "#blueprintjs/select/lib/css/blueprint-select.css";
import "bootstrap/dist/css/bootstrap.css";
const ScenarioIcon = styled(Button)`
transition: all 0.2s ease;
}
`;
class App extends Component {
constructor() {
super();
this.state = {
name: "React"
};
}
render() {
return (
<Flex>
<Box width={"100%"}>
<div
style={{
padding: "20px",
backgroundColor: "red"
}}
className={cx("bp3-card bp3-interactive")}
>
<Flex alignItems="center" style={{ backgroundColor: "green" }}>
<RadioGroup onChange={() => {}} selectedValue={1}>
<Radio
style={{ backgroundColor: "yellow" }}
className={cx(Classes.TEXT_LARGE)}
label={"Sample"}
value={1}
/>
</RadioGroup>
<Box flex="auto" />
<ButtonGroup>
<ScenarioIcon
className="utility-button"
icon={<Icon icon={IconNames.EDIT} color={Colors.WHITE} />}
minimal={true}
title="Edit"
/>
<ScenarioIcon
className="utility-button"
icon={
<Icon icon={IconNames.DUPLICATE} color={Colors.WHITE} />
}
minimal={true}
title="Copy"
/>
<ScenarioIcon
className="utility-button"
icon={
<Icon
icon={IconNames.DOCUMENT_SHARE}
color={Colors.WHITE}
/>
}
minimal={true}
title={"Archive"}
/>
<ScenarioIcon
className="utility-button"
icon={
<Icon
icon={IconNames.TRASH}
color={Colors.RED1}
color={Colors.WHITE}
/>
}
minimal={true}
title="Delete"
/>
<Divider />
</ButtonGroup>
<Icon
icon={IconNames.CHEVRON_RIGHT}
color={Colors.WHITE}
className="align-self-center"
iconSize={20}
/>
</Flex>
</div>
</Box>
</Flex>
);
}
}
export default App;
CodeSandbox Link: Link
P.S: I am open to using bootstrap as well for alignment.

Answer 1

From what i see, there is some bottom margin to Radio.
If you use below style on 'Radio', it works just fine.
style={{ backgroundColor: "yellow", marginBottom: "0" }}

Answer 2

Set margin-bottom: 0; for label.