Есть следующий код в HTML:
<section id="hello_section">
<div class="hello_section_wrapper">
<div class="hello_section_text_wrapper">
<h1>Imagine your home smart enough <strong class="hello_section_green_text">to take care</strong> of itself.</h1>
<p>Turn your home into a smarthome today with a simple & affordable upgrade. Discover the upgrade that automates home maintenance.</p>
<div class="hello_section_btns">
<a class="hello_section_green_btn" href="#">Get Started</a>
<a class="hello_section_clear_btn" href="#">Learn More</a>
</div>
</div>
<div class="hello_section_img_wrapper">
<img class="hello_section_img1" src="img/hello_section_img1.png" alt="Interior image">
<img class="hello_section_img2" src="img/hello_section_img2.png" alt="Interior image">
</div>
</div>
</section>
И такие стили:
#hello_section {
width: 100%;
height: 100vh;
background: url('img/hello_section_bg.svg') -5px 0/1200px no-repeat;
}
.hello_section_wrapper {
margin: auto;
width: 90%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.hello_section_text_wrapper {
width: 600px;
height: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
}
.hello_section_btns {
display: flex;
justify-content: flex-start;
align-items: center;
}
.hello_section_img_wrapper {
width: 50%;
height: 100%;
overflow: hidden;
}
.hello_section_img2 {
transform: translate(200px, -200px);
}
Вопрос в том, как сделать что б блоки hello_section_text_wrapper и hello_section_img_wrapper были выровнены по вертикали относительно hello_section_wrapper. Понимаю, что проблема в том, что у меня высота указывается в процентах от родительского блока, где высота тоже в процентах, но не знаю как сделать по другому. Надеюсь на помощь. Спасибо