如何使两个按钮并排并响应？

Question

我有一个小任务，它需要两个按钮并排使用桌面时，然后在移动时，他们堆叠在彼此的顶部，但没有减少大小。

我已经设法使他们堆叠在一起，但他们是不同的大小？每当我定义按钮的百分比大小时，它们会使它们在设备视图中挤在一起并看起来很丑。

.button { 
 
    background-color: #f2f2f2;; 
 
    border: none; 
 
    color: #737373; 
 
    padding: 15px 32px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    margin: 4px 2px; 
 
    cursor: pointer; 
 
    border-radius: 4px; 
 
    border: 2px solid #003366; 
 
    font-family: sans-serif; 
 
    font-style: italic; 
 
    font-weight: bold; 
 
    font-size:0.875em; 
 
     display: inline-block;} 
 
.button2 { 
 
background-color: #003366; 
 
border: none; 
 
color: white; 
 
padding: 15px 32px; 
 
text-align: center; 
 
text-decoration: none; 
 
display: inline-block; 
 
font-size: 16px; 
 
margin: 4px 2px; 
 
cursor: pointer; 
 
border-radius: 4px; 
 
border: 2px solid #003366; 
 
font-family: sans-serif; 
 
font-style: italic; 
 
font-weight: bold; 
 
font-size:0.875em; 
 
    display: inline-block;}

<div class="booking"> 
 
     <h2><i class="fa fa-check-circle" aria-hidden="true"   
 
     style="color:#33cc33;""> </i> Congratulations your jet2 holiday 
 
     booking has been confirmed</h2> 
 

 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 
     Consectetur inventore, dignissimos quasi fuga sunt, nihil nemo 
 
     labore? Molestiae, eum, eos! Illum non laborum asperiores, 
 
     mollitia minima quasi atque. Eligendi, atque.</p> 
 

 

 
    <button class="button">Cancel</button> 
 
    <button class="button2">Continue</button> 
 

 
</div> 
 

 

 
    

Answer 1

总结他们在一个div，给他们percentage width，使格已经

div{ 
    display: flex; 
    justify-content: space-between; 
} 

填充可能可能陷入困境的反应，所以要意识到这一点，以及