CSS animate two elements to overlay in middle - html

Question

What is the simplest CSS for animating two elements to overlay each other when their parent is hovered on?
Here are two attempts I have done, each with separate issues.
https://codepen.io/ndullea/pen/RwNaXdJ
In this one they will both move, but it is not smooth because they have different parents and the elements are also misaligned because of that.
HTML:
<div class="container">
<div class="bar"/>
</div>
<div class="container_two">
<div class="bar_two"/>
</div>
CSS:
.container {
height: 100vh;
width: 100vw;
}
.bar {
height: 100px;
background-color: #29cf7c;
width: 10px;
}
.bar_two {
height: 150px;
background-color: #eb4034;
width: 10px;
margin-left: 200px;
z-index: 1;
}
.container:hover > .bar {
transform: translateX(100px);
transition: all .5s linear;
}
.container:not(:hover) > .bar {
transform: translate(0px, 0px);
transition: all .5s linear;
}
.container:hover > .bar_two {
transform: translateX(-100px);
transition: all .5s linear;
}
.container:not(:hover) > .bar_two {
transform: translate(0px, 0px);
transition: all .5s linear;
}
https://codepen.io/ndullea/pen/wvBWwML
This one is smooth, but they both animate they same way (instead of going towards each other), I think because of the margin property.
HTML:
<div class="container">
<div class="bar"/>
<div class="bar_two"/>
</div>
CSS:
.container {
height: 100vh;
width: 100vw;
}
.bar {
height: 100px;
background-color: #29cf7c;
width: 10px;
}
.bar_two {
height: 150px;
background-color: #eb4034;
width: 10px;
margin-left: 200px;
z-index: 1;
}
.container:hover > .bar {
transform: translateX(100px);
transition: all .5s linear;
}
.container:not(:hover) > .bar {
transform: translate(0px, 0px);
transition: all .5s linear;
}
.container:hover > .bar_two {
transform: translateX(-100px);
transition: all .5s linear;
}
.container:not(:hover) > .bar_two {
transform: translate(0px, 0px);
transition: all .5s linear;
}

Answer 1

I have edited your second fiddle with some improvements: https://jsfiddle.net/v1m0rsfj/11/
HTML
<div class="container">
<div class="bar"></div>
<div class="bar_two"></div>
</div>
CSS
.container {
height: 100vh;
width: 100vw;
border: 2px solid #000;
}
.bar,
.bar_two {
position: absolute;
height: 100px;
background-color: #29cf7c;
width: 10px;
}
.bar {
}
.bar_two {
left: 200px;
background-color: #eb4034;
z-index: 1;
}
.container:hover > .bar {
transform: translateX(100px);
transition: all .5s linear;
}
.container:not(:hover) > .bar {
transform: translate(0px, 0px);
transition: all .5s linear;
}
.container:hover > .bar_two {
transform: translateX(-100px);
transition: all .5s linear;
}
.container:not(:hover) > .bar_two {
transform: translate(0px, 0px);
transition: all .5s linear;
}
I found the biggest issue to be how you were closing your div tags <div /> isn't the right way to close a div tag please use <div></div>
Also I found margin-left to be mis-positioning your element hence the changes to your css