We Keep Coding

How do I float elements left and right in a <div> tag?

I'm unable to format https://evolveyourgaming.com/extensions/ecademy.php correctly. I cannot get the images to float:left with their names underneath, and the bios to float:right. Currently my VS Code is giving me yellow squiggly lines for all my Float properties. Can anyone offer any insight as CSS is not my strong suit.
function condenseLinks() {
var x = document.getElementById("links");
if (x.className === "vidlinks") {
x.className += " responsive";
} else {
x.className = "vidlinks";
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.content {
height: 100%;
text-align: center;
display: inline-block;
}
.vidbody {
background-color: black;
height: 100%;
display: inline-block;
}
.logo {
float: left;
max-width: 90%;
padding-top: 6px;
}
.vidhead {
background-color: black;
position: relative;
height: 10%;
width: 100%;
}
body {
background-color: black;
background-size: cover;
display: inline-block;
width: 100%;
height: 100%;
}
.container {
width: 90%;
max-width: 120rem;
height: 100%;
margin: 0 auto;
position: relative;
}
.teamBios .container {
display: flex;
}
.container img {
float: left;
}
.teamBios .about-details {
flex: 1;
}
.vidlinks {
float: right;
width: 45%;
text-decoration: none;
color: white;
font-family: cairo, sans-serif;
font-style: normal;
font-weight: 200;
padding-top: 16px;
}
/* Hide the link that should open and close the topnav on small screens */
.vidlinks .icon {
display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
float: left;
overflow: hidden;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Style the links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.left {
width: 40%;
text-align: center;
display: inline-block;
vertical-align: top;
}
.right {
width: 40%;
text-align: center;
display: inline-block;
vertical-align: top;
}
.mid {
text-align: center;
display: inline-block;
width: 10%;
}
.vidlinks a {
color: white;
}
/* Add a dark background on topnav links and the dropdown button on hover */
.vidlinks a:hover,
.dropdown:hover .dropbtn {
color: #7e3bfe;
}
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
color: #8449ff;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 600px) {
.mid {
display: none;
}
.left {
width: 80%;
}
.right {
width: 80%;
}
.vidbody {
background-color: black;
height: auto;
width: auto;
display: inline-block;
}
.vidlinks {
text-align: center;
width: 90%;
text-decoration: none;
color: white;
font-family: cairo, sans-serif;
font-style: normal;
font-weight: 200;
padding-top: 16px;
}
.logo {
text-align: center;
max-width: 100%;
padding-top: 2px;
}
}
.vidlinks.responsive {
position: relative;
}
.vidlinks.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.vidlinks.responsive a {
float: none;
display: block;
text-align: left;
}
.vidlinks .responsive .dropdown {
float: none;
}
.vidlinks .responsive .dropdown-content {
position: relative;
}
.vidlinks .responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
/* Style the form */
#regForm {
background-color: #ffffff;
margin: 100px auto;
padding: 40px;
width: 70%;
min-width: 300px;
}
/* Style the input fields */
.input {
padding: 10px;
width: 100%;
font-size: 17px;
font-family: Raleway;
border: 1px solid #aaaaaa;
}
/* Mark input boxes that gets an error on validation: */
.input.invalid {
background-color: #ffdddd;
}
/* Hide all steps by default: */
.tab {
display: none;
}
/* Make circles that indicate the steps of the form: */
.step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}
/* Mark the active step: */
.step.active {
opacity: 1;
}
/* Mark the steps that are finished and valid: */
.step.finish {
background-color: #4CAF50;
}
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Cairo&display=swap" rel="stylesheet">
</head>
<body>
<div class='content'>
<div class='vidhead'>
<div class='logo'>
<p>
<img src='Evolvelogo.png' style='width:24%; height: 30%;'>
</p>
</div>
<div class='vidlinks' id='links'>
<a href='../index.html#about' style='text-decoration:none; font-weight:200px; ' class='inactive'>ABOUT</a>
<a href='../index.html#team' style='text-decoration:none; ' class='inactive'>TEAM</a>
<a href='../index.html#contact-form-section' style='text-decoration:none; ' class='inactive'>CONTACT</a>
<a href='tournament.php' style='text-decoration:none; ' class='active'>TOURNAMENT</a>
<a href='privacy.php' style='text-decoration:none; ' class='active'>PRIVACY POLICY</a>
<a href='ecademy.php' style='text-decoration:none; ' class='active'>ECADEMY</a>
<a href="javascript:void(0);" class="icon" onclick="condenseLinks()">
<i class="fa fa-bars"></i>
</a>
</div>
<div class='vidbody' style="text-align:center; width:100%;">
<h2 style="color:white; background:black; color:#8449ff; font-family:cairo, sans-serif; font-style:normal; font-weight:200px;">
<img src="eCademy_LogoPNG.png" alt="ecademy" style="width:400px; height:100px;">
</h2>
</div>
<div class="teamBios" style="color:black; background:white; width:100%; height:450px; color: #8449ff;
font-family: cairo, sans-serif; font-style: normal; font-weight:200px;">
<div class="container" style=" display:inline-block; width:40%; height:100%;">
<br><br><br>
<div class="bioPhotos" style="width:10%; height: 50%; display:inline-block; float:left;">
<img src="evolvephoto1.png" style="width:256px; height:266px;">
</div>
<div class="about-details" style="width:50%; height: 50%; display:inline-block; float:right; text-align:left;">
<br><br><br> NAME: Kevin Kapoor <br> IGN/Handle: Irøh (or sometimes ZukosUncle) <br> Twitch: #irohsTeaShop <br>
</div>
<p>
With fire in his heart and analysis on the brain, Kevin has been a competitor since birth. From being a state champion debater to a national champion beatboxer, regardless of the venue or skill, he identifies the most effective routes to victory and pushes
for the W. He is a proven League of Legends coach who can help an individual gain elo or a team win tournaments. No matter how big or small the aspiration, he will assist in achieving your goals by making you the best you that you can be.
</p>
</div>
</div>
</div>
<div class="teamBios" style="color:black; background:black; width:100%; height:450px; color: #8449ff;
font-family: cairo, sans-serif; font-style: normal; font-weight:200px;">
<div class="container" style=" display:inline-block; width:40%; height:100%;">
<br><br><br>
<div class="bioPhotos" style="width:10%; height: 50%; display:inline-block; float:left;">
<img src="Desmond Wong2.jpg" style="width:256px; height:266px;">
</div>
<div class="about-details" style="width:50%; height: 50%; display:inline-block; float:right; text-align:left;">
<br><br><br> NAME: Desmond Wong <br> IGN/Handle: Overlorred <br> Twitch: #overlorredtft <br>
</div>
<p>
A versatile coach in every sense of the word, he brings four years of experience competing at the top level of the collegiate esports scene as both a player and as a coach. Combined with his six years as a high elo solo queue player, his coaching style
brings together all the knowledge he has learned over the years from playing with and against the best. It is the perfect blend of his experiences from his time in the competitive scene and grinding the solo queue ladder. Whether you're completely
new to the game or an aspiring pro, Desmond is ready to guide you every step of the way to help you reach your goals.
</p>
</div>
</div>
<div class="teamBios" style="color:black; background:white; width:100%; height:450px; color: #8449ff;
font-family: cairo, sans-serif; font-style: normal; font-weight:200px;">
<div class="container" style=" display:inline-block; width:40%; height:100%;">
<br><br><br>
<div class="bioPhotos" style="width:10%; height: 50%; display:inline-block; float:left;">
<img src="Alex Gingrich2.jpg" style="width:256px; height:266px;">
</div>
<div class="about-details" style="width:50%; height: 50%; display:inline-block; float:right; text-align:left;">
<br><br><br> Name: Alex Gingrich<br> IGN/Handle: Chunder<br> Twitter: #alexgingrich<br>
</div>
<p>
Alex has built his entire professional life around applying traditional sports and business strategy into esports. Although Alex has been playing competitive games since the days of Halo 3 he got his first taste in esports player improvement at grad school
when he managed the inaugural Varsity Overwatch teams at The University of Akron. Since then Alex has gone on to work for ReKTGlobal, owners of Team Rogue and The London Royal Ravens, where he gains first hand knowledge of professional esports
and the mentalities of what makes a great player.
</p>
</div>
</div>
</div>
</div>
</body>
</html>

I think you put the image and name under e parent div and make the display flex. Also remove the unwanted tag. Hope it works
<div class="container">
<div class="bioPhotos">
<img src="evolvephoto1.png">
<div class="about-details">
NAME: Kevin Kapoor <br>
IGN/Handle: Irøh (or sometimes ZukosUncle) <br>
Twitch: #irohsTeaShop <br>
</div>
</div>
<p>
With fire in his heart and analysis on the brain, Kevin has been a competitor since birth. From being a state champion debater to a national champion beatboxer, regardless of the venue or skill, he identifies the most effective routes to victory and pushes for the W. He is a proven League of Legends coach who can help an individual gain elo or a team win tournaments. No matter how big or small the aspiration, he will assist in achieving your goals by making you the best you that you can be.
</p>
</div>
.container{
display: flex;
width: 50%;
}
.bioPhotos{
display: flex;
flex-direction: column;
}
.about-details{
display: flex;
}
p{
display: flex;
align-items: center;
justify-content: center;
}

Change this part:
<div class="container" style="display: flex;width: 60%;justify-content: center;padding: 20px;">
<div class="cullomnOne">
<div class="bioPhotos" style="width:256px; height:266px;min-width: 256px;min-height: 256px;">
<img src="evolvephoto1.png" style="width:100%; height:100%;">
</div>
<div class="about-details">
NAME: Kevin Kapoor <br>
IGN/Handle: Irøh (or sometimes ZukosUncle) <br>
Twitch: #irohsTeaShop <br>
</div>
</div>
<p style="padding: 20px;">
With fire in his heart and analysis on the brain, Kevin has been a competitor since birth. From being a state champion debater to a national champion beatboxer, regardless of the venue or skill, he identifies the most effective routes to victory and pushes for the W. He is a proven League of Legends coach who can help an individual gain elo or a team win tournaments. No matter how big or small the aspiration, he will assist in achieving your goals by making you the best you that you can be.
</p>
</div>

How to fix an element to the right of div?

I have a button which i want to fix it's position to the right of a div, the button is toggling the visibility of it's left div, problem is the button loses it's position once the resolution is changing...
Here is an Example
And here is what I've done so far:
$('.results_toggle').on('click', function() {
$(this).toggleClass('left_hide');
$('.left').toggle();
});
.cont {
width: 100vw;
}
.left {
position: relative;
width: 50vw;
height: 100vh;
background-color: grey;
float: left;
border-left: 2px solid white;
}
.right {
height: 100vh;
width: 50vw;
float: left;
}
.results_toggle:before {
content: "\f054";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: black;
font-size: 24px;
padding-right: 0.5em;
position: absolute;
top: 14px;
left: 5px;
}
.results_toggle {
background-color: grey;
height: 60px;
width: 30px;
position: absolute;
z-index: 106;
top: 45vh;
right: 223px;
border-bottom-right-radius: 110px;
border-top-right-radius: 110px;
border-bottom: 0;
}
.left_hide {
left: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
<div class="left">
</div>
<div class="results_toggle">
<!-- the button -->
</div>
<div class="right">
</div>
</div>

The simplest solution to this would be to put the toggle within the .right div, and position it at left: 0 so that it is always adjacent to the .left div, something like this:
<div class="cont">
<div class="left"></div>
<div class="right">
<div class="results_toggle"></div>
</div>
</div>
.right {
position: relative; /* add this */
}
.results_toggle {
/* remove 'right' */
left: 0; /* add this */
}
Working example
The advantage of this method is that it will be completely unaffected by any change in screen resolution.

You use viewport units , so the values of them will change when changing the viewport size ( resolution ) .
If you want the arrow to stay in the middle ( and so, on the right side of the grey div ) , you should center it this way
See snippet below
$('.results_toggle').on('click', function() {
$(this).toggleClass('left_hide');
$('.left').toggle();
});
.cont {
width: 100vw;
}
.left {
position: relative;
width: 50vw;
height: 100vh;
background-color: grey;
float: left;
border-left:2px solid white;
}
.right {
height: 100vh;
width: 50vw;
float: left;
}
.results_toggle:before {
content: "\f054";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: black;
font-size: 24px;
padding-right: 0.5em;
position: absolute;
top: 14px;
left: 5px;
}
.results_toggle {
background-color: grey;
height: 60px;
width: 30px;
position: absolute;
z-index: 106;
top: 50%;
right:50%;
transform:translate(100%,-50%);
border-bottom-right-radius: 110px;
border-top-right-radius: 110px;
border-bottom: 0;
}
.left_hide{
left:0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
<div class="left">
</div>
<div class="results_toggle">
</div>
<div class="right">
</div>
</div>

For me the best approach to align elements is to use Flexbox attributes. With those attributes, you can place element as boxes in a row, column...In your case you have a main box .cont with a left side and a right side. This is the result with a Flexbox placement :
The main div is represented by the red background. Inside you have your left div and aligned with your right button.
Here is the code to make this :
<html>
<head>
<meta charset='utf-8' />
<style type="text/css">
.cont
{
display: flex;
align-items: center;
background-color: red;
color: white;
}
.left
{
background-color: blue;
margin: 5px;
}
button
{
background-color: green;
}
</style>
</head>
<body>
<div class="cont">
<div class="left">
<p>Left div</p>
</div>
<div class="results_toggle">
<button>Right button</button>
</div>
<div class="right"></div>
</div>
</body>
</html>

not sure if that's what you meant, but i simply changed the leftattribute of the button to 50vw, the same as your grey box.
Here's a fiddle
edit:
another option: position: relative and float: left without left or right property
updated fiddle

It's because you've fixed each property.
You can fix an element at the right of his parent using absolute and relative position. And add the width of you child.
Example
.parent{
width:200px;
height:200px;
background-color:#ccc;
position:relative;
}
.child{
position:absolute;
right:0;
top:100px;
transform:translateX(100%) translateY(-50%);
}
<div class="parent">
<button class="child">btn</button>
</div>

apply same jquery function to element present inside parent div

code jsFiddle
I applied jquery's click function to 'li#info' element. But when I click, it perform jquery to element of different parent also ('#theme div#info-overlay').
I want, whenever 'li#info' is clicked on the parent element('#theme') then it perform function to its child element only(div#info-overlay).
Like in the code, by clicking on 'Fe' it open overlay on both the block. But i want it to show overlay only to the block for which 'Fe'is clicked.
sorry, I am new in jquery.

I got your point. you just need to change one line of code
because both divs have same ids thats why both are appearing on click
and it's not a good practice to use same id multiple time on a single file.
it will make issue somewhere sometime.
i have change this line
$("div#info-overlay").toggle('100');
into this
$(this).parents('#theme').find("#info-overlay").toggle('100');
check this
JS Fiddle

use this to find div $(this).parents('#theme').find("#info overlay").toggle('100');
$(document).ready(function(){
$("div#theme").hover(function(){
$(".theme .header *").show();
$(".theme .header .overlay").hide();
},function(){
$(".theme .header *").hide();
});
$("li#info").click(function(){
$(".theme .header .overlay").hide();
$(this).parents('#theme').find("#info-overlay").toggle('100');
// $("div#info-overlay").toggle('100');
});
});
/*
theme block
*/
.theme{
width: 100%;
height: 250px;
background-color: #fff;
margin: 20px auto;
}
.theme .header{
width: 100%;
height: 200px;
position: relative;
background-color: #eee;
}
.theme .header *{
display: none;
}
.theme .header .overlay{
position: absolute;
background-color: #fff;
left: 60px;
top: 10px;
width: 83%;
height: 180px;
z-index: 80;
}
.theme .header .about{
position: absolute;
left: 10px;
top: 10px;
}
.theme .header .about li{
display: block;
height: 40px;
width: 40px;
border-radius: 50%;
background-color: #FED200;
opacity: .5;
color: #fff;
padding: 5px 10px;
margin: 5px 0;
}
.theme .footer{
width: 100%;
height: 50px;
padding: 0 20px;
}
.theme .footer .left{
width: 85%;
display: inline-block;
overflow-y:hidden;
height: 50px;
float: left;
padding: 10px 0;
}
#media screen and (min-width:620px) {
.theme{
width: 70%;
}
}
#media screen and (min-width:720px) {
.theme{
width: 49%;
display: inline-block;
}
}
#media screen and (min-width:920px) {
body .container.theme-holder {
width: 70%;
}
}
#media screen and (min-width:1024px) {
body .container.theme-holder {
width: 95%;
}
.theme{
width: 32%;
}
}
#media screen and (min-width:1200px) {
body .container.theme-holder {
width: 85%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="theme" class="theme">
<div class="header">
<div class="about">
<li id="info">Fe</li>
</div>
<div id="info-overlay" class="overlay">
info
</div>
</div>
<div class="footer">
<div class="left">
<div class="name">
<p>Corporate sdfsfdsfdsfsd</p>
</div>
</div>
</div>
</div>
<div id="theme" class="theme">
<div class="header">
<div class="about">
<li id="info">Fe</li>
</div>
<div id="info-overlay" class="overlay">
info
</div>
</div>
<div class="footer">
<div class="left">
<div class="name">
<p>Corporate dfsasdfdsafs</p>
</div>
</div>
</div>
</div>

How to center elements together <div> and <h1>, top to bottom?

I'm trying to mimic the following site: http://weareundefined.be/ and once you get passed the first page by clicking it on it, there is a computer and a short paragraph below it.
After analyzing the site using dev webtool, I still am not able to center the elements properly. I attempted the top: 50% with position: relative, yet it is not centered correctly.
I tried to break down to the necessary CSS, but still not able to recreate it.
Code:
<div style={{height: '100%’}}>
<div className="container">
<div id="rotate-container">
<div>
Center Me
</div>
</div>
<h1> We are undefined</h1>
<p>We're a creative agency with a focus on digital.</p>
</div>
</div>
CSS (SCSS):
.container {
height: 100%;
position: relative;
padding: .5em;
margin: 0 auto;
max-width: 400px;
text-align: center;
top: 50%;
}
#rotate-container {
div {
color: #fb3131;
font-size: 40px;
font-weight: bold;
display: block;
}
}
What could I be missing or doing incorrectly? And how are they handling the resizing of elements? Any suggestions or guidance would be greatly appreciated it.
Thank you in advance and will be sure to accept and upvote answer.

You're close. both html and body need to be height: 100%;, too, otherwise it's children won't be 100% of the viewport.
.container doesn't need height: 100%;. Since you already have .container at top: 50%;, just use transform: translateY(-50%); to shift it back up 50% of it's own width so the center of it is in the center of the browser.
body, html {
height: 100%;
}
.container {
position: relative;
padding: .5em;
margin: 0 auto;
max-width: 400px;
text-align: center;
top: 50%;
transform: translateY(-50%);
}
#rotate-container div {
color: #fb3131;
font-size: 40px;
font-weight: bold;
display: block;
}
<div style="height:100%;">
<div class="container">
<div id="rotate-container">
<div>
Center Me
</div>
</div>
<h1> We are undefined</h1>
<p>We're a creative agency with a focus on digital.</p>
</div>
</div>
You can also use flexbox with align-items: center;
body,
html {
height: 100%;
}
.container {
position: relative;
padding: .5em;
margin: 0 auto;
max-width: 400px;
text-align: center;
}
#rotate-container div {
color: #fb3131;
font-size: 40px;
font-weight: bold;
display: block;
}
<div style="height:100%; display: flex; align-items: center;">
<div class="container">
<div id="rotate-container">
<div>
Center Me
</div>
</div>
<h1> We are undefined</h1>
<p>We're a creative agency with a focus on digital.</p>
</div>
</div>

Try:
body {
min-width: 970px;
padding-top: 70px;
padding-bottom: 30px;
}
.container {
width: 970px;
max-width: none !important;
padding-right: 10px;
padding-left: 10px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
And adjust accordingly

Responsive alignment of two divs with pure text for parallax

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>

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>

As a quick fix, remove the transform from header_container__2 and set the two containers' top attributes to be equal. Fiddle
Edit - Aligned at 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>