Flexbox: нет пробела между двумя вертикальными значками

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

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

сбросить отступы и поля в <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-дескрипторPercentageButton

<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;
}

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