How to set all checkboxes and its labels on left side one after another line?

I am learning HTML and CSS. I am trying to design a webpage to practice HTML and CSS. I am trying to add multiple checkboxes with labels in new lines form left side. But I couldn't.

I want to design a page like the below image:

But the checkboxes is not going to left. Here is my design below.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project 05</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="headings">
            <h1 >freeCodeCamp Survey Form</h1>
            <h3><em>Thank you for taking the time to help us improve the platform</em></h3>
        </div>
        <div class="form-container">
            <label for="">Name</label>
            <input type="text" required>
            <label for="">Email</label>
            <input type="email" required>
            <label for="">Age (optional)</label>
            <input type="number" required>
            <label for="">Which option best describes your current role?</label>
            <select name="" id="">
                <option disabled> Select an option</option>
                <option class="container" value="challenges">Challenges</option>
                <option class="container" value="projects">Projects</option>
                <option class="container" value="community">Community</option>
                <option class="container" value="opensource">Opensource</option>
            </select>
            <label for="">What is your favorite feature of freeCodeCamp?</label>
            <label class="checkboxes"><input type="checkbox"> One</label>
            <label class="checkboxes"><input type="checkbox"> Two</label>
            <label class="checkboxes"><input type="checkbox"> Three</label>
        </div>
    </div>
</body>
</html>

CSS

body {
    background: linear-gradient(rgba(68, 28, 179, 0.753), rgba(68, 28, 179, 0.753)), url(./survey-form-background.jpeg) no-repeat center center fixed, rgba(68, 28, 179, 0.753);; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.container {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    font-family: 'Poppins', sans-serif;
}
.headings {
    color: white;
    text-align: center;
}
.form-container {
    background: rgba(27, 27, 50, 0.8);
    margin-left: 18rem;
    margin-right: 18rem;
    padding: 2em;
    text-align: left;
    border-radius: 5px;
}
label {
    color: white;
    display: flex;
    font-size: 1.125rem;
    margin-bottom: 10px;
}
input {
    width: 100%;
    height: 1.5rem;
    padding: 0.375rem 0.01rem;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    margin-bottom: 30px;
}
select {
    width: 100%;
    height: 2.4rem;
    padding: 0.375rem 0.01rem;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    margin-bottom: 30px;
}
.checkboxes {
    text-align: left;
}

How can I do that? Please help me how can I do that design with CSS.