title: How do I make two buttons side by side and responsive?
body: <p>I have a small task where it requires the two buttons side by side when using a desktop, and then when on mobile they are stacked on top of each other but have not decreased in size.</p>
  
  <p>I have managed to make them stack on top of each other but they are different sizes? Whenever I defined the % size of the buttons it makes them squish together and look hideous when in device view.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="booking"&gt;
           &lt;h2&gt;&lt;i class="fa fa-check-circle" aria-hidden="true"          
           style="color:#33cc33;""&gt; &lt;/i&gt; Congratulations your jet2 holiday 
           booking has been confirmed&lt;/h2&gt;
  
           &lt;p&gt;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.&lt;/p&gt;
  
  
    &lt;button class="button"&gt;Cancel&lt;/button&gt;
    &lt;button class="button2"&gt;Continue&lt;/button&gt;
  
  &lt;/div&gt;
  
  
          </code></pre>
  </div>
  </div>
  </p>