Switch and buttons on messageBox

[srirambv]

Test plan

#8622 (comment)

---

• Did you search for similar issues before submitting this one?
  Yes

• Describe the issue you encountered:
  Sync alert needs refactoring. While testing Refactor syncTab.js with Aphrodite #8044 found sync reset alert code buttons were not aligned properly. Needs refactoring to match existing behavior

• Platform (Win7, 8, 10? macOS? Linux distro?):
  Windows 10 x64

• Brave Version (revision SHA):
  b098619 @luixxiul confirmed same on master branch as well

• Steps to reproduce:

  1. Enable sync on laptop
  2. Click on reset Sync, cancel -> close modal
  3. Click on reset sync again -> alert box buttons aligned next to text

-- Screenshot if needed:

• Any related issues: Alert box with quite lengthy content cannot be closed #7930

[luixxiul]

The suppress message and the button is aligned to the same line on this issue: #7930

The fix works fine only if there is one button, which is "OK" button. With other buttons it does not work as expected, as the screenshot on the 1st post shows.

The block for buttons and the other stuff should be separated to avoid such a case, which is a strategy I took when I refactored commonForm components (See: commonFormButtonWrapper on about:styles )