Unable to move the button position to down

Issue

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.

Solution

The button is likely taking up the full space of the container div. Instead trying applying a margin to the container rather than the button

ie.

.button-div {
  margin: 10px 0;
}

Answered By - TwennyTwenny