Отзывчивое выравнивание двух разделов с чистым текстом для параллакса

Question

Я создаю сайт параллакса и имею проблемы с созданием двух разделов в секции, которые абсолютно идеально выравниваются, сохраняя при этом свой отзывчивый характер.

К сожалению, при изменении размера окна два элемента не ведут себя так, как предполагалось. Я включил изображение, иллюстрирующее то, чего я пытаюсь достичь. Желтые линии указывают на контроль, который я ищу. Текст 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>

Answer 2

Как быстро исправить, удалить transform из header_container__2 и установить два контейнера top атрибуты быть равными. Fiddle

Edit - Унифицированные на 50%

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

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

 
section > div { 
 
    position: absolute; 
 
} 
 

 
* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.header_container__1 { 
 
    display: inline-block; 
 
    float: left; 
 
    font-size: 2vw; 
 
    line-height: 2vw; 
 
    color: orange; 
 
} 
 

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

<section> 
 
    <div class="header_container__2"> 
 
    <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> 
 
    THIS IS 
 
    <p>SO AWESOME</p> 
 
    </div> 
 
</section>