What i'm gonna do wrong?

Hey guys, i just want to improve my HTML CSS skills. I found some challenging picture which is ;

https://res.cloudinary.com/practicaldev/image/fetch/s--HA8IxitZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gylog4tikhxrqsrssaii.jpg

But im stucked on the first box line. I do display: inline-block but it won't work.

My codes are like this ;

    <header class="header">
        <h2>Employee Satisfaction Survey</h2>
        <hr>
    </header>

    <section>
        <div class="name">
            <p>Name</p>
        </div>
        <div class="input-area">
            <div class="input1">
                <label>First Name</label><br>
                <input type="text" name="First Name">
            </div>
            <div class="input2">
                <label>Last Name</label><br>
                <input type="text" name="Last Name">
            </div>
        </div>
    </section>

And CSS like this ;

header {
    text-align: center;

}

h2 {
    margin-bottom: 30px;
}

.name {
    margin-left: 30px;
}



.input-area {
    margin-left: 30px;
display: in;
}