Counter widget in Reflex-FRP

Question

I am trying to make a counter widget in Reflex with the following qualities:

1. It has a minimum value of 0 -- and hitting "decrement" while at 0 results in nothing happening.

2. (solved) The increment button is to the right of the decrement button.

3. It has Bulma CSS styles applied.

This is the code I currently have:

bodyElementIncrRounds :: ObeliskWidget js t route m => m ()
bodyElementIncrRounds = do
    -- el "h2" $ text "Using foldDyn with function application"
    evIncr <- button "Increment"
    evDecr <- button "Decrement"
    -- evReset <- button "Reset"
    dynNum <- foldDyn ($) (0 :: Int) $ leftmost [(+ 1) <$ evIncr, (+ (-1)) <$ evDecr]
    el "h3" $ display dynNum
    return ()

This is what the result is:

When I try to swap the buttons by flipping these to values: (+ 1) <$ evIncr, (+ (-1)) <$ evDecr, it has no effect at all on the location of the buttons. (I.e. increment remains on the left.)

When I try to apply Bulma code like this:

bodyElementIncrRounds :: ObeliskWidget js t route m => m ()
bodyElementIncrRounds = do
    -- el "h2" $ text "Using foldDyn with function application"
    evIncr <- elAttr "button" ("class" =: "button") $ button "Increment"
    evDecr <- button "Decrement"
    -- evReset <- button "Reset"
    dynNum <- foldDyn ($) (0 :: Int) $ leftmost [(+ 1) <$ evIncr, (+ (-1)) <$ evDecr]
    el "h3" $ display dynNum
    return ()

It duplicates the button for some reason and also places the existing (ugly) button inside of the Bulma widget (edit: the duplication problem has been solved, but not the "button inside the button" problem):