Hover property not working for div from different containers - html

Question

I have two different boxes when want to be able to change the properties of one box as I hover somewhere else.
I figured that if I have both boxes in the same container it works as you can see on my snippet here.
Here my html and css:
.first {
color: blue;
background: black;
width: 299px;
}
.first:hover + .second {
background: red;
color: white;
}
.second {
color: red;
background: black;
width: 300px;
margin-left: 10px;
}
.container {
display: flex;
}
<div class="container">
<div class="first">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam delectus quo corporis, n
</div>
<div class="second">
Lorem ipsum dolor sit amet, consectetur adipisicing e et magnam rem, doloribus libero quas numquam esse in culpa!
</div>
</div>
But how can I do the same thing if the boxes are not in the same container?
Thanks in advance.

Answer 1

If you use display: inline-block you can remove the use of the container but because you are using display: flex on the container class you won't have the advantage of the child items (the first and second divs) stretching to fill the height of the container. You could use a fixed height to keep them at an equal height.
.first{
color: blue;
background: black;
width: 299px;
display: inline-block;
}
.first:hover + .second {
background: red;
color: white;
}
.second{
color: red;
display: inline-block;
background: black;
width: 300px;
margin-left: 10px;
}
<div class="first">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam delectus quo corporis, n
</div>
<div class="second">
Lorem ipsum dolor sit amet, consectetur adipisicing e et magnam rem, doloribus libero quas numquam esse in culpa!
</div>

Answer 2

(post edited)
Use Jquery : Create a new class with a background color, it will be added with Jquery and removed when your mouse left the div.
Code : (don't forget to add jquery)
$('div.one').hover(function(){
$('div.two').toggleClass('three');
});
Check this :
https://jsfiddle.net/wnszbhj3/1/