How do I make buttons with titles above to be side-by-side and aligned in the center? (I just started learning couple of days ago)

Here's I got so far: (https://i.stack.imgur.com/nAkhB.png)

Here's my HTML:

<h2 class="section-title">BUTTONS</h2><div class="buttons"><div class="button-default"><small class="btn-label">Default</small><button>Primary Button</button><button>Secondary Button</button></div><div class="button-hovered"><small class="btn-label">Hovered</small><button>Primary Button</button><button>Secondary Button</button></div></div>

I want it to look like this: (https://i.stack.imgur.com/BTD0u.png)