How to get element to align with element next to it?

Question

I'm relatively new to CSS and I'm having a weird issue:

Why is my "Forgot Password" span floating higher than "Remember Me"?

Here's the React component DOM:

<div>
    <div id="loginTitle">
        <h2>Welcome</h2>
        <h1>Login</h1>
    </div>
    <div id="loginForm">
        <form onSubmit={login}>
            <label> Username:
                <input id="username" type="text" className="loginBox" ref = {node => user = node}/>
            </label>
            <label> Password:
                <input id="password" type="password" className="loginBox" ref = {node => pass = node}/>
            </label>
            <br />
            <div>
                <span id="loginCheck">
                    <input type="checkbox" id="rememberMe"/>
                    <label for="rememberMe">Remember Me</label>
                </span>
                <span id="forgotPass">Forgot Password?</span>
            </div>
            <input id="loginSubmit" type="submit" value="Sign In" />  
        </form>
    </div>
</div>

And my CSS:

body {
  padding: 0;
  font-family: sans-serif;
}    
#loginTitle {
  margin: auto;
  text-align: center;
}    
#loginTitle h1 {
  color: #4971b2;
}    
#loginForm {
  margin: auto;
  width: 200px;
  font-size: 10px;
}    
#loginSubmit {
  width: 100%;
  display: block;
  background-color: #4971b2;
  color: white;
}    
.loginBox {
  width: 100%;
  display: block;
}    
#forgotPass {
  float: right;
}
#loginCheck {
  float: left;
}

How can I make the Forgot Password span align with the span next to it?

Answer 1

The problem is probably occurring because both spans have different heights, because the first one has a checkbox. You can fix this by using flexbox to center-align both spans in their container.

Add a class to the <div> that contains your <span>s:

<div class="some_class">
    <span id="loginCheck">
        <input type="checkbox" id="rememberMe"/>
        <label for="rememberMe">Remember Me</label>
    </span>
    <span id="forgotPass">Forgot Password?</span>
</div>

Set the following styles on the <div> that contains the spans:

.some_class {
    display: flex;
    justify-content: space-between;
    align-items: center;
}