JavaScript/React noobie - I have to move an icon down and I feel like I did it in the worst way possible

I am getting started with an existing website and I have to do some basic redesigning. It is written in JavaScript and React and I experienced an issue when trying to rearrange some icons. This part of the website had 6 icons, but I had to delete 2, so the remaining 4 need to be arranged properly around the center blob.

the way the icons were arranged before

the way I want the icons to be arranged

Code:

 const FeaturesSection = () => (
  <Section relative>
    <Image left src="/images/blob-left-side.png" />
    <Image src="/images/blob-right-side.png" />

    <ContentContainer>
      <TrackVisibility once>
        <Header>
          <Title>text</Title>
          <Subtitle>text</Subtitle>
        </Header>
      </TrackVisibility>  

      <Wrapper>

        <InnerWrapper>
        <Text><br></br><br></br><br></br><br></br><br></br><br></br></Text>
         <StyledTrackVisibility offset={-100} partialVisibility once>
            <ItemWrapper top>
              <Icon><IconImage src="/images/e.svg" /></Icon>
              <Name>text</Name>
              <Text>text</Text>
            </ItemWrapper>
          </StyledTrackVisibility>  
        </InnerWrapper>    

        <InnerWrapper middle>
          <StyledTrackVisibility offset={-100} partialVisibility once>
            <ItemWrapper topmiddle vote>
              <Icon><IconImage src="/images/check-square.svg" /></Icon>
              <Name>text</Name>
              <Text>text</Text>
            </ItemWrapper>
          </StyledTrackVisibility>
          <StyledTrackVisibility offset={-100} partialVisibility once>
            <ItemWrapper unlock>
              <Icon><IconImage src="/images/unlock-alt.svg" /></Icon>
              <Name>text</Name>
              <Text>text</Text>
            </ItemWrapper> 
          </StyledTrackVisibility>
        </InnerWrapper>

        <InnerWrapper>
        <Text><br></br><br></br><br></br><br></br><br></br><br></br></Text>
          <StyledTrackVisibility offset={-100} partialVisibility once>
            <ItemWrapper top pay>
              <Icon><IconImage equal src="/images/eql-icon-white.svg" /></Icon>
              <Name>text</Name>
              <Text>text</Text>
            </ItemWrapper>
          </StyledTrackVisibility>
        </InnerWrapper>
      </Wrapper>
    </ContentContainer>
  </Section>  
);

The way that I fixed the icon arrangement is by adding breaks

<Text><br></br><br></br><br></br><br></br><br></br><br></br></Text>

which I believe is a horrible practice, so feel free to criticize me.

I am getting confused to where the actual styling code occurs for this section. This code is in the same file, but I changed things around and it didn't affect the icons:

const Image = styled.img`
  ${props => props.left ? 'left: 0px;' : 'right: 0px;'} 
  position: absolute;
  top: ${props => props.left ? '5rem' : '-9rem'};
  width: ${props => props.left ? '11%' : '17%'};

  @media (min-width: 900px) and (max-width: 1300px) {
    top: ${props => props.left ? '25rem' : '-9rem'};
  }
`;

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;

  @media (min-width: ${props => props.theme.tabletBreakpoint}) {
    background-image: url('/images/equal-splash-center.png'), 
      url('/images/circle-outline-ripple.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 45rem, 75.6rem;
    flex-direction: row;
    padding: 0 6rem;
  }
`;

const InnerWrapper = styled.div`
  display: flex;
  margin: 0 0 6rem 0;

  @media (min-width: ${props => props.theme.tabletBreakpoint}) {
    flex: 1;
    flex-direction: column;
    ${props => props.middle ? 'margin: 0 0;' : 'margin: 15rem 0;'}
  }
`;

const ItemWrapper = styled.div`
  ${props => props.isVisible && props.dbt && `animation: ${slideLeftToRight} .7s ease`};
  ${props => props.isVisible && props.ifs && `animation: ${slideRightToLeft} .7s ease`};
  ${props => props.isVisible && props.vote && `animation: ${slideLeftToRight} .7s ease`};
  ${props => props.isVisible && props.unlock && `animation: ${slideRightToLeft} .7s ease`};
  ${props => props.isVisible && props.pay && `animation: ${slideLeftToRight} .7s ease`};
  ${props => props.isVisible && props.erc20 && `animation: ${slideRightToLeft} .7s ease`};
  flex: 1;
  opacity: ${props => props.isVisible ? '1' : '0'};
  padding: 0 .5rem;
  text-align: center;

  @media (min-width: ${props => props.theme.tabletBreakpoint}) {
    ${props => props.isVisible && props.dbt && `animation: ${slideLeftToRight} .7s ease`};
    ${props => props.isVisible && props.ifs && `animation: ${slideLeftToRight} .7s ease`};
    ${props => props.isVisible && props.vote && `animation: ${slideDown} .7s ease`};
    ${props => props.isVisible && props.unlock && `animation: ${slideUp} .7s ease`};
    ${props => props.isVisible && props.pay && `animation: ${slideRightToLeft} .7s ease`};
    ${props => props.isVisible && props.erc20 && `animation: ${slideRightToLeft} .7s ease`};
    ${props => props.top && 'margin: 9rem 0 12rem 0;'}
    ${props => props.topmiddle && 'margin: 0 0 55rem 0;'}
    padding: 0 3rem;
  }
`;

const Icon = styled.div`
  background-color: ${props => props.theme.purple};
  border-radius: 15px;
  box-shadow: 0px 13px 36px 0px #7656ea4f;
  height: 6.7rem;
  margin: 0 auto 2rem auto;
  padding: 1.3rem;
  width: 6.7rem;

  @media (min-width: ${props => props.theme.tabletBreakpoint}) {
    box-shadow: 0px 25px 36px 0px #7656ea4f;
    height: 9rem;
    width: 9rem;
    padding: 1.8rem;
    margin: 0 auto 4rem auto;
  }
`;

const IconImage = styled.img`
  height: 4rem;

  @media (min-width: ${props => props.theme.tabletBreakpoint}) {
    height: 5.37rem;
  }
`;

const Name = styled.h2`
  color: #3b3353;
  font-size: 1.8rem;
  font-weight: 600;
  margin: 0 0 .2rem 0;

  @media (min-width: ${props => props.theme.tabletBreakpoint}) {
    font-size: 2.5rem;
    margin: 0 0 1rem 0;
  }
`;

const Text = styled.p`
  color: #3e4360;
  font-size: 1rem;
  margin: 0;

  @media (min-width: ${props => props.theme.tabletBreakpoint}) {
    font-size: 1.8rem;
    line-height: 2.2rem;
  }
`;

const StyledTrackVisibility = styled(TrackVisibility)`
  flex: 1;
`

What do I need to look at if I want to understand how to move elements like the ones I need to right now?