flexbox: между двумя вертикальными значками нет места

Question

Привет, ребята, у меня есть этот макет:

Теперь вот что я попробовал:

сбросить отступы и поля,в <a href> и в <img src...>

HTML-контейнер

<div>
    <div className="percentage">
        {percentage}%
        <div className="buttonContainer">
            <HandlePercentageButton add onClick={() => this.handlePercentage('add')} />
                <HandlePercentageButton subtract onClick={() => this.handlePercentage('subtract')} />
        </div>
    </div>
    <span className="labelBudget">Budget allocato</span> 
</div>

HTML handlePercentageButton

<div>
    <a href="#" onClick={onClick}>
        {add ? <img src="https://image.flaticon.com/icons/svg/148/148790.svg" style={{ height: '15px' }} /> : null }
        {subtract ? <img src="https://image.flaticon.com/icons/svg/148/148791.svg" style={{ height: '15px' }} /> : null}
    </a>
</div>

и это мой настоящий css:

это маленький кусочек карты, и основной контейнер имеет этот css

.container {
    display: inline-flex;
    background-color: #FAFAFA;
    border-radius: 10px;
    padding: 10px;
    border: 1px solid #E5E4E4
}

внизу у нас есть проценты (большое синее число)

.percentage {
  display: flex;
  color: #33BBFF;
  font-size: 30px;
  font-weight: 700;
  padding-bottom: 5px;
}

Как я могу выровнять две кнопки с процентным числом и оставить их вертикально без пробелов?

Answer 1

Используйте гибкий макет, как это:

<Container
  style={{
    display: 'flex',
    alignItems: 'center'
  }}>
  <LeftContainer>
    <Percentage />
  </LeftContainer>
  <RightContainer
    style={{
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center'
    }}>
    <Button type="inc" />
    <Button type="sub" />
  </RightContainer>
</Container>;