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

<div className="App">
      {!showEvents && (<div>
        <button onClick= {() => setShowEvents(true)}>Show Events </button>
      </div>)}
      {showEvents && (<div>
        <button onClick = {() => setShowEvents(false)}>Hide Events</button>
      </div>)}
      <Title title={title} />

      {showEvents && < Eventlist events={events} handleClick = {handleClick} />}
      
      {showModal && (
        <Modal handleClose={handleClose}>
          <h2>Terms and Conditions</h2>
          <p>Agree the terms and Conditions</p>
        </Modal>
      )}
      
      <div>
      
        <button1 onClick={() => setShowModal(true)}> Show </button1>
        </div>
      
    </div>
  );
}

// Export the App component to consume/ import the component in some other pages.
export default App;

CSS code for two buttons

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;

}

In the above code, I need to move button1 down from button. Can anyone help me to resolve this issue.