unable to position text and checkbox on same line

I'm a beginner in web development and I have a sign up form where I have a checkbox to click for remembering your account . However my checkbox is positioned way under my "Remember me text" and not next to it . It is obviously an issue of my CCS I haven't found yet .My submit and cancel buttons are out of bounds in my form as well probably because of the checkbox issue. I would appreciate your help with guiding me thorugh this issue . Thank you in advance . My code :

.form-area{

position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:500px;
height:600px;
box-sizing:border-box;  
background:rgb(0,0,0,0.5);
padding:40px;   
        
        
}

.imgcontainer img{
    height: 100px; /* set a default height*/
    margin-top: -75px; /* move image up fo 75px */
    border: 1px solid black; /* define a border */
    border-radius: 50%; /* make the image rounded, this works only with square images*/
        
}

.imgcontainer{
    display: flex; /* change display */
    justify-content:center;/* align to the center the image */
    /* NOTE : there is a lot of other way to align the image to the center, you can use the one that you prefer*/
}



h1{

margin:0;
padding:0 0 20px;
font-weight:bold;
color:#ffffff;
                
}       

.form-area p {

margin:0;
padding:0;
font-weight:bold;
color:#ffffff;
                
}       

.form-area input,select{

margin-bottom:20px;
width:100%;     
        
        
}       

.form area input[type=text], .form-area input[type="password"]
{

border:none;
border-bottom:1px solid #ccc;
background-color:transparent;   
outline:none;
height:40px;
color:#ffffff;
display:16px;
        
        
}       


/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)}
  to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
  from {transform: scale(0)}
  to {transform: scale(1)}
} 



span{

color:white;    
        
}       

::placeholder{
        
color:#ffffff   
        
}       



.form-area select{
        
margin-top:20px;
padding:10px 0;
        
        
}       


.signupbtn{

border:none;
height:40px;
outline:none;
color:#ffffff;
font-size:15px;
background-color:#4CAF50;
cursor:pointer; 
border-radius:20px;     
        
        
}       


.cancelbtn{

border:none;
height:40px;
outline:none;
color:#ffffff;
font-size:15px;
background-color:tomato;
cursor:pointer; 
border-radius:20px;     
        
        
}       



button:hover{
        
opacity:0.7;    
        
        
}       

//my full form 
<div class="form-area">

 <form action="Start_page.html" class = "sign-form animate" onsubmit="return validateform()" method = "post">
 
    <div class="imgcontainer">
       <img src="IMAGES/circleman.png" alt ="avatar" class = "Avatar">    
    </div>
 
   <div class="container">
     <h1>Sign Up</h1>
     <p>Please fill in this form to create an account.</p>
     <hr>
         
         
    <label for="name" ><b><span>Name<span></b></label>
    <input type="text" placeholder="Enter Name" name="onoma" id = "myname" required>
        
        
    <label for="surname" ><b><span>Surname<span></b></label>
    <input type="text" placeholder="Enter Surname" name="epith" id = "mysurname" required>

    <label for="email" ><b><span>Email<span></b></label>
    <input type="text" placeholder="Enter Email" name="email" id = "mailID" required>

    <label for="psw"><b><span>Password</span></b></label>
    <input type="password" placeholder="Enter Password" name="psw" id = "pass" required>

    <label for="psw-repeat"><b><span>Repeat Password</span></b></label>
    <input type="password" placeholder="Repeat Password" name="psw-repeat"  id = "passagain" required>
    
    //this is the issue 
    
    <label for "checkbox"><span>Remember me</span> </label>
    <input type="checkbox" value="remember-me" id="remember_me">

    <p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>

    <div class="clearfix">
      <button type="button" class="cancelbtn" onclick = "window.location.href='Start_page.html'">Cancel</button>
      <button type="submit" class="signupbtn">Sign Up</button>
    </div>
        
   </div>
   
 </form>

 </div>