javascript - 两个 div 与纯文本的响应式对齐以实现视差

Question

我正在构建一个视差网站，但在使一个部分中的两个 div 变得绝对完美对齐的同时仍保持其响应特性时遇到了问题。

不幸的是，当窗口大小改变时，这两个元素不会按预期运行。我附上了一张图片，说明我正在努力实现的目标。黄线表示我正在寻找的控件。文本 THIS IS 应该与水平轴上的橙色文本完美对齐，而 SO AWESOME 的边缘应该与橙色文本垂直对齐。

我如何实现这一点？

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

话不多说，就是几个css对齐属性的组合:

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>