title: button jumps to a new line (css)
body: <p>My application should look good on small screens. When it is normal size, everything looks good. But when the screen is too small my buttons starting to mess up.  </p>
  
  <p>Red square represents an image, yellow represents some text and blue represents buttons.  </p>
  
  <p><img src="https://i.stack.imgur.com/X1oSY.png" alt="enter image description here"> </p>
  
  <p>Normally, the top version is displayed (the correct one)
  When the screen is small, the second situation happens, when the bottom button jump to a new line.  </p>
  
  <p>Ideally, both buttons should stay one above the other. This is my css code:</p>
  
  <pre><code>{
      background-color: #6b89ac;
      border: 1px solid #89a9d0;
      border-bottom-color: #1d4474;
      color: white;
      font-weight: bold;
      text-decoration: none;
      padding: 2px 5px 2px 5px;
      margin-bottom: 3px;
      text-align: center;
      display: inline-block;
      width: 100px;
  }
  </code></pre>