How to responsively roll down area in CSS - html

Question

I'm trying to add a text area with a white background:
I wanted the white area to be lower and further to the right.
.grey-zone {
color: white;
width: 100%;
height: 70vh;
background-color: #2f3e4d;
}
.whoami {
color: black;
width: 25%;
background-color: #ffffff;
padding: .5%;
}
.whoami p {
padding-top: 5%;
font-size: 105%;
}
<div class="grey-zone">
<div class="whoami">
<h1>Qui suis-je?</h1>
</div>
</div>
Does someone know how to do that?
Thanks

Answer 1

If you want to play in white space, you can flex your main container and move the contents around as you wish.
.grey-zone {
color: white;
width: 100%;
height: 70vh;
background-color: #2f3e4d;
display: flex;
align-items: end;
justify-content: end;
}
If you add the last 3 css codes I added, you will fix the white box to the bottom right.

Answer 2

One way is using from padding for .grey-zone:
.grey-zone {
box-sizing: border-box; /*here*/
color: white;
width: 100%;
height: 100vh;
background-color: #2f3e4d;
padding: 20px 0 0 20px; /*here*/
}
.whoami {
color: black;
width: 25%;
background-color: #ffffff;
padding: .5%;
}
<div class="grey-zone">
<div class="whoami">
<h1>Qui suis-je?</h1>
</div>
</div>

Answer 3

You can add this to you class .whoami
.grey-zone {
color: white;
width: 100%;
height: 100vh;
background-color: #2f3e4d;
}
.whoami {
color: black;
width: 25%;
background-color: #ffffff;
padding: .5%;
position: absolute;
top: 50px;
left: 20px;
}
<div class="grey-zone">
<div class="whoami">
<h1>Qui suis-je?</h1>
</div>
</div>