Wie kann ich diese beiden Sachen nebeneinander stellen?

Hallo ich wollte mal fragen wie ich den button (rechts unten) neben den text, also auf die gleiche höhe verschieben kann.

Hier mein Index.html inhalt:

<!DOCTYPE html>

<link rel="stylesheet" type="text/css" href="stylesheet.css" />

<html lang="de">

<head>

<meta name="title" content="Random Website">

</head>

<body>

<header>

<center>

<img alt="Ich Arbeite dran, ok?" src="index.png"></center><center>Schulaufgaben</center>

</header>

<dt>Fach</dt>                      

<dd>-Zuletzt bearbeitet Aufgabe, Status:</dd>  

<dt>Deutsch</dt>

<dd>-4.1.2020 Rezension, Status: Erledigt</dd>

<dd>-5.1.2020 Hölle, Status: Erledigt</dd>

<dt>Physik</dt>

<dd>-5.1.2020 Alpha-, Beta- und Gammastrahlen Status: Erledigt</dd>

  <dt>Physik Wahlpflicht</dt>

<dd>-5.1.2020 , Status: Nicht Erledigt</dd>

<dt></dt>

<dd>-.1.2020 , Status:</dd>

<dd>-.1.2020 , Status: </dd>

<center>  

  <script type="text/javascript">

  var clicks = 0;

  function onClick() {

    clicks += 1;

    document.getElementById("clicks").innerHTML = clicks;

  };

 

</script>

  <button type="button" onClick="onClick()">Click if you are bored</button>

  <p>Clicks: <a id="clicks">0</a></p></center>

</body>

Und hier mein stylesheet inhalt:

body{ background-color: #242A2E;font-family: Arial, sans-serif; font-size: 20px;color: #20A70D;}

header { font-size: 50px; background-color: #0A0E11;font-family: Arial, sans-serif;padding-bottom:px;}

footer {font-size: 20px; background-color: #13659A; font-family: Arial, sans-serif;padding-bottom:20px;}

title {font-size: 30px; background-color:#13659A; font-family: serif;}

button {font-size: 20pt;padding-bottom:20px;padding-top:20px;padding-left:5px;padding-right:5px;margin-left: 1450px;margin-top:20px;}

p {margin-left:1450px;}

Danke im vorraus

Wie kann ich diese beiden Sachen nebeneinander stellen?
Computer, Technik, HTML, CSS

Was möchtest Du wissen?