How Do I Line Up The Text On The Left And The Inputs On The Right?

HTML-CSS
1

I’m building my first personal web page, and can’t seem to line up my email address with the inputs, more specifically the “name” input, on the right. You see how it’s slightly above the inputs form? I’m trying to get it level. I’ve tried tinkering with the margins and padding, but i’m really new at this, in case that wasn’t obvious. I’ve included screenshots of the HTML and CSS code.

I haven’t added in all the attributes yet, but Feel free to give advice on how to clean it up, the HTML especially, because I know it’s a mess right now. By the way, I highlighted my Email address because I know the font is dark. The color shows up in the browser, but for some reason not the preview window in VS Code.

<!DOCTYPE html>
<html lang="eng">
    <head>
        <meta charset="utf-8">
        <title>Eli's Place</title>
        <link href="./Fun.css" rel="stylesheet">
    </head>
    <body>
        <div>
            <header>
                <div>
                  <h1>Eli P.</h1>
                </div>
                <h3></h3>
                <nav>
                    <a></a>
                    <a>Projects</a>
                    <a>About Me</a>
                    <a>Contact Me</a>
                    <a>Artists</a>
                </nav>
            </header><br>
        </div>
          <label>Enter Birthday <input type="date"></label><br><br>
          <label>Pick Color <input type="color"></label>
        <div>
            <h2>Projects</h2>
            <p>Projects Coming Soon</p>
        </div>
        <div>
            <h2>About Me</h2>
            <p>About Me Coming Soon</p>
        </div>
        <div>
            <div>
              <h2>Contact Me</h2>
            </div>
            <div>
                <p>I'd like to hear from you.</p><br><br>
            </div>
            <div class="email">
                <div>
                    <span>EliasP@msn.com</span>
                </div>
                <div>
                    <form><input type="text" placeholder="Name" required><br><br>
                        <input type="text" placeholder="Email" required><br><br>
                        <input type="text" placeholder="Subject" required><br><br>
                        <textarea placeholder="Message" cols="48" rows="10" required></textarea>
                        </textarea><br>
                        <button>Send</button>
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>

body {
    background-image: url(Images/wallpaper-7896859_1920.jpg);
    background-size: cover;
    background-attachment: fixed;
}
h1 {
    font-family: phygital;
    font-size: 80px;
    text-align: center;
}
h3 {
    font-family: phygital;
    font-size: 50px;
    text-align: center;
}
h2 {
    font-family: phygital;
    font-size: 50px;
}
p {
    font-family: "neon 80s";
    font-size: 20px;
}
.email {
    width: 400px;
    display: inline-block;
}
input {
    width: 400px;
    display: inline-block;
}
form {
    margin-left: 350px;
    margin-bottom: 200px;
}
2

Please post your actual code instead of pictures. Thank you

1 Like