I want to align the LearnMoreButton text next to h4 text. With the existing, the learn more shows in next line

Viewed 26
const Header: React.FC<Props> = ({ copy }: Props) => {
    if (isUndefined(copy)) return null;
    return (
        <Container>
            <img src={HeartCircle} />
            <Text>
                <h4>{copy.recommended.subheading}</h4>
                    <LearnMoreButton>
                        <RecommendedProviderLabel
                            isRecommendedProvider={true}
                            showIcon={false}
                            label={copy.ctas.learnMore}
                        />
                    </LearnMoreButton>
            </Text>
        </Container>
    );
1 Answers

you can use display flex

flexRow: {
    display: flex;
  }

<div className={classes.flexRow}>
          <img src={HeartCircle} />
          <Text>
                <h4>{copy.recommended.subheading}</h4>
                    <LearnMoreButton>
                        <RecommendedProviderLabel
                            isRecommendedProvider={true}
                            showIcon={false}
                            label={copy.ctas.learnMore}
                        />
                    </LearnMoreButton>
            </Text>
        </div>
Related