Responsive alignment of two divs with pure text for parallax

Question

I am building a parallax site and have problems making two divs in a section become absolutely perfectly aligned while still maintaining its responsive nature.

Unfortunately when the window size is changed the two elements do not behave as intended. I have included a image illustrating what i am trying to achieve. The yellow lines indicate the control i am looking for. The text THIS IS should be perfectly inline with the orange text on the horizontal axis, while edge of SO AWESOME should be vertically aligned with the orange text.

How do i achieve this?

Fiddle: https://jsfiddle.net/76z982zn/2/

CSS

body,
html {
  height: 100%;
  background-color: black;
}

section {
  height: 100%;
  position: relative;
}

section > div {
  position: absolute;
}

* {
  padding: 0;
  margin: 0;
}

.header_container__1 {
  font-size: 2vw;
  line-height: 2vw;
  color: orange;
  top: 42vh;
  left: 35vw;
}

.header_container__2 {
  text-align: right;
  font-size: 10vw;
  line-height: 10vw;
  color: red;
  top: 50vh;
  right: 0;
  transform: translate(0%, -50%);
}

HTML

<section>
  <div class="header_container__1">
    <p>This is some text i want perfectly </p>
    <p>This is some text i want perfectly </p>
    <p>This is some text i want perfectly </p>
    <p>This is some text i want perfectly </p>
  </div>
  <div class="header_container__2">
    <p>THIS IS</p>
    <p>SO AWESOME</p>
  </div>

</section>

Answer 1

Not much to say, just a combination of several css alignment attributes:

body {
  width:100%;
  height: 100vh;
  margin: 0px;
  background: black;
}

#supercontainer {
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);  
}

#container {
  display: inline-block;
  position: relative;
}

#a1 {
  display: inline-block;
  font-size: 0;
  color: tomato;
  margin-right: 0px;
  margin-left: auto;
  position: relative;
  text-align: right;
  margin: 0px;
  font-size: 4em !important;
  vertical-align: top;
  line-height: 0.8em;
}

#a1::first-line {
  line-height:1em;  
}

#a2 {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.7em;
  line-height: 2px;
  font-weight: bold;
  color: gold;
  vertical-align: baseline;
}

#a2::first-line {
  line-height: 0px;
}

<div id=supercontainer>
<div id=container>
  
<div id=a1>THIS IS<br>SO AWESOME</div>
  
<div id=a2>
<p>This is some text i want perfectly </p>
<p>This is some text i want perfectly </p>
<p>This is some text i want perfectly </p>
<p>This is some text i want perfectly </p>
</div>
  
</div>
</div>