How to stop considering the Margin when buttons are displayed in Responsive mode

I am using Angular 14 and SCSS

I am having 2 buttons in a dialog component displaying horizontally. The first button has text I am feeling lucky and second buton has text Not lucky. There should be a gap of 20px between these 2 buttons.

Now I just want to align the buttons vertically one below the other in Responsive mode and when it displays like that the Margin of 20px to the left of the 2nd button should not be considered and the 2 buttons should be centered vertically.

How can I do that?

You can make it with css flex, (my answer not angular), but I sure you can repeat this in angular

to demostrate responsibility, I add the .parent:hover css, so over the parent block to see how it changes the layout

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black; 
  flex-wrap: wrap; /* wrap if item not fit */
  gap: 20px; 
  width: 500px; /* only need for transition */ 
}
.parent:hover {
  width: 100px;
  transition: width 3s;
}
.child {
  white-space: nowrap; /* be sure your child can't shrink width */
  background-color: red;
  display: block;
}

<div class="parent">
  <div class="child">Im Lucky</div>
  <div class="child">Im'm Not Lucky</div>
</div>