Create two divisions in a section - html

Question

I want to create a two box of white background in which one box consists of user login and other box with professional login.
I dont know the policy of section and div's, I tried alot but I am not getting it right
EDIT:I want to make the design responsive
html code:
<section class=wrapper-box>
<div class="001">
<!--<i class="material-icons md-48 md-light">person_outline</i>-->
</div>
<div class="002">
</div>
</section>
I want to make something like this :
How do I create two such filled boxes?

Answer 1

A class name should not start with a digit. A quick test shows that those names are actually problematic: while the divs themselves don't suffer, styles applied to them via .001 and .002 are not rendered.
So the solution is to give them class names starting with a letter.
Example:
.C001 {
border: 2px solid #BBB;
display: inline-block;
margin: 1em;
width:100px; height:100px;
}
.002 {
border: 2px solid #BBB;
display: inline-block;
margin: 1em;
width:100px; height:100px;
}
<section class=wrapper-box>
<div class="C001">
<!--<i class="material-icons md-48 md-light">person_outline</i>-->
one
</div>
<div class="002">
two
</div>
</section>
As you can see, only the div where I put a C in front of the class actually gets the styles.
Edit:
The W3C page on CSS selectors says,
In CSS1, a class name could start with a digit (".55ft"), unless it was a dimension (".55in"). In CSS2, such classes are parsed as unknown dimensions (to allow for future additions of new units). To make ".55ft" a valid class, CSS2 requires the first digit to be escaped (".\35 5ft")
so apparently, other than changing the class names, the other solution is to write the css selector like this: \30 01
In addition, another quick and dirty test shows that you can also write [class~='001'] for a selector.
I can't really recommend those methods though. Too hacky. Best stick with starting with a letter.