I am attempting to use flexbox to achieve a specific layout. However, I am struggling with managing the spacing between two text fields (text and secondaryText). What is the best way to approach this issue?
popper: createStyles({
root: {
backgroundColor: white,
borderRadius: 4,
boxShadow: "0 2px 12px 0 rgba(0, 0, 0, 0.5)",
zIndex: 1301,
maxHeight: 200,
overflowY: "auto",
display: "flex",
flexDirection: "column",
},
}),
};
<Popper
className={toClassName(classes.popper)}
>
{children} // Component AutocompleteSelection
</Popper>
const AutocompleteSelection: FC<AutocompleteSelectionProps> = ({
text,
secondaryText,
}): JSX.Element => {
const classes = useMakeStyles(baseStyles) as Properties;
return (
<ListItem styles={listItem}>
<Typography classes={classes.typography}>
{text}
{secondaryText}
</Typography>
</ListItem>
);
};
const baseStyles: Properties = {
listItem: createStyles({
root: {
"&:hover": {
backgroundColor: greyTwo,
},
},
}),
typography: createStyles({
root: {
fontSize: 14,
lineHeight: 1,
},
}),
};