Hey everyone, I've been working on this layout:
https://i.sstatic.net/4Aye0.png
Here's what I tried so far:
Resetting padding and margin in the <a href> and in the <img src...>
HTML container
<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>
And here is my current css:
This card layout has the following main container styling:
.container {
display: inline-flex;
background-color: #FAFAFA;
border-radius: 10px;
padding: 10px;
border: 1px solid #E5E4E4
}
Below, we have the percentage number (the big blue number)
.percentage {
display: flex;
color: #33BBFF;
font-size: 30px;
font-weight: 700;
padding-bottom: 5px;
}
How can I align the two buttons next to the percentage number vertically with no space between them?