Any CSS Gurus? Make a single field with multiple buttons

I am playing around with a single Formula Rich Text Field containing multiple buttons. 

I managed to get it to look pretty good using the code below, however on mobile it is not as nice. The buttons don't stretch nicely and use up the whole screen width.  I tried something else (see very bottom) that sort of worked, but still not clean. Any CSS gurus who can get the buttons next to each other on mobile, and have them stretch across the width of the mobile?

var text URLOne = FirstURL Here
var text WordsOne = "Button One Words";

var text ButtonOne = 
"<a  style=\"text-decoration:none; background: #63bf3c; border-radius: 3px; color: #ffffff;display: inline-block; padding: 7px 12px; text-align: center; text-shadow: none; border: 0px solid #030404; font-size: 13px \"href='"
  & $ButtonOne
  & "'>" & $WordsOne & "</a>";

var text URLTwo = Second URL Here
var text WordsTwo = "Button Two Words";

var text ButtonTwo = 
"<a  style=\"text-decoration:none; background: #63bf3c; border-radius: 3px; color: #ffffff;display: inline-block; padding: 7px 12px; text-align: center; text-shadow: none; border: 0px solid #030404; font-size: 13px \"href='"
  & $ButtonTwo
  & "'>" & $WordsTwo & "</a>";

$ButtonOne & "&nbsp&nbsp&nbsp" & $ButtonTwo  //This works OK.

//I tried below and it fills the width on mobile, but is sort of a button inside a button and looks weird
//"<span class='Vibrant' style='font-size:12px;color:#e61515'>" & $SaveButton & "&nbsp&nbsp&nbsp" & $CancelButton & "</span>"