[SOLVED] How to place two elements together and next element in next line in form CSS and HTML?

How to place two elements together and next element in next line in form CSS and HTML?

I am beginner in HTML,CSS,JavaScript

I wish to place "enter username" box and "OK" image together, the OK image should be next to input box, and the next elements next in next line.

.check1 {
    display: inline;
    margin-right: -4px;
    float: inline-end;
}
.check2 {
    display: inline;
    margin-right: -4px;
    float: inline-start;
}
.login-form {
    margin: 50px auto;
    width: 300px;
    font-family: Tahoma, Geneva, sans-serif;
}
.login-form h2 {
    text-align: left;
    color: rgb(124, 34, 105);
}
.login-form input{
    width: 100%;
    padding: 15px 15px 15px 15px;
    margin: 10px 0 10px 0px;
    box-sizing: border-box;
    outline-color: rgb(38, 179, 235);
}
.login-form button{
    width: 100%;
    border: none;
    cursor: pointer;
    padding: 15px;
    background-color: rgb(148, 53, 127);
    color: white;
    box-sizing: border-box;
    outline: none;
}
.login-form button:hover {
    opacity: 90%;
}
#username {
    width: 20px;
    height: 20px;
}
#password {
    width: 20px;
    height: 20px;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome</title>
        <link rel="stylesheet" href="css/main.css"/ >
    </head>
    <body>
                <div class="login-form">
            <h2>Student Record Management</h2>
            <form action="auth" method="POST">
                <div class="check1">
                    <img id="username" src="ok.png" alt="ok">
                    <input type="text" name="userid" placeholder="Enter Username" required autofocus autocomplete="off" / >
                </div>
                <div class="check2">
                    <input type="password" name="password" placeholder="Enter Password" required / >
                    <img id="password" src="wrong.png" alt="wrong">
                <div>
                <button type="submit">Login</button>
                <label><pre>Create account <a href="signup.html">here</a></pre></label>
            </form>
        </div>
    </body>
</html>

the next element should be in next line and same the box and the image should be in same line.

and if someone tells me how to access the HTML elements in JavaScript would be really appreciated.

Solution

This code will align the input box and ok image as an inline element.

.check1 {
    display: flex;
   flex-direction: row-reverse;
    margin-right: -4px;
    float: inline-end;
}