How to align 2 divisions vertically in html-CodePudding

Right now I'm having a hard time aligning two divisions vertically, something like this:

But they are not being aligned like that and instead, they are being aligned like this horizontally:

And here is my code:

@font-face {
  font-family: 'mainFont';
  src: url("Fonts/Poppins/Poppins-Medium.ttf") format('truetype');
}

body {
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #f8f8f8;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.main {
  font-family: 'mainFont';
  font-weight: normal;
  font-style: normal;
  font-size: 5.6vw;
  color: #181818;
}

.subMain {
  font-family: 'mainFont';
  font-weight: normal;
  font-style: normal;
  font-size: 3.5vw;
  color: #181818;
  position: absolute;
}

.description {
  font-family: 'mainFont';
  font-weight: normal;
  font-style: normal;
  font-size: 2vw;
  color: #181818;
  position: absolute;
  left: 20.6%;
  bottom: 3%;
}

.typed-text {
  color: chartreuse;
}

.space {
  margin-top: 150px;
}

.container p span.typed-text {
  font-family: 'mainFont';
  font-weight: normal;
  font-style: normal;
  font-size: 3.5vw;
  color: #181818;
}

.cursor {
  animation: blinker 0.6s linear infinite;
  color: #181818;
}

.cursor.typing {
  animation: none;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

h2,
h1 {
  margin: 0;
}

<!DOCTYPE html>
<html lang='en'>

<head>
  <link rel='stylesheet' href='style.css'>
</head>

<body>
  <div>
    <h1 class='main'>Hello