title: Unable to move the button position to down
body: <p>I am new to CSS.I am trying to move the position of button down which is overlapping with another button. I tried putting the button in different div, still facing the same issue. Below is my code</p>
  <pre><code>&lt;div className=&quot;App&quot;&gt;
        {!showEvents &amp;&amp; (&lt;div&gt;
          &lt;button onClick= {() =&gt; setShowEvents(true)}&gt;Show Events &lt;/button&gt;
        &lt;/div&gt;)}
        {showEvents &amp;&amp; (&lt;div&gt;
          &lt;button onClick = {() =&gt; setShowEvents(false)}&gt;Hide Events&lt;/button&gt;
        &lt;/div&gt;)}
        &lt;Title title={title} /&gt;
  
        {showEvents &amp;&amp; &lt; Eventlist events={events} handleClick = {handleClick} /&gt;}
        
        {showModal &amp;&amp; (
          &lt;Modal handleClose={handleClose}&gt;
            &lt;h2&gt;Terms and Conditions&lt;/h2&gt;
            &lt;p&gt;Agree the terms and Conditions&lt;/p&gt;
          &lt;/Modal&gt;
        )}
        
        &lt;div&gt;
        
          &lt;button1 onClick={() =&gt; setShowModal(true)}&gt; Show &lt;/button1&gt;
          &lt;/div&gt;
        
      &lt;/div&gt;
    );
  }
  
  // Export the App component to consume/ import the component in some other pages.
  export default App;
  </code></pre>
  <p>CSS code for two buttons</p>
  <pre><code>button{
    display: inline-block;
    padding: 10px 20px;
    background: #f1f6;
    border-radius: 8px;
    font-weight: normal;
    height: 40px;
  
  }
  
  button1{
    display: inline-block;
    padding: 10px 20px;
    background: #f1f6;
    border-radius: 8px;
    font-weight: normal;
    height: 40px;
  
  }
  </code></pre>
  <p>In the above code, I need to move button1 down from button. Can anyone help me to resolve this issue.</p>
  <p><a href="https://i.stack.imgur.com/hDU4i.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hDU4i.png" alt="enter image description here" /></a></p>