How to responsively roll down area in CSS-CodePudding

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 >
  <div >
    <h1>Qui suis-je?</h1>
  </div>
</div>

Does someone know how to do that? Thanks

CodePudding user response：

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.

CodePudding user response：

You can add this to you class .whoami

position:absolute; top: 50px; left: 20px;

CodePudding user response：

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 >
  <div >
    <h1>Qui suis-je?</h1>
  </div>
</div>