Image changing div position - html

Question

I am trying to make two columns separated by or inside a circle page the second column should have an image it like this :
<div class="step second">
<div id="upload-img"></div>
<div id="sperator">
<div class="circle" id="or"><p class="number" style="padding-left:25%;">or</div>
</div>
<div id="default-img">
<img src=""/>
</div>
</div>
But for some reason the position of the #sperator div is changing with the image my css is bit long so here is a js fiddle for more explaining : here
As you can see the image should be in the same line with the other div but its changing the position of the separator div

Answer 1

You should re-check your html tags. Make sure each tag closed correctly
Here your css :
.step{
position:relative;
width:500px;
height:250px;
border:1px solid black;
}
#upload-img{
position:absolute;
left:0;
top:0;
width:50%;
height:100%
}
#default-img{
position:absolute;
right:0;
top:0;
width:50%;
height:100%
}
#upload-img img, #default-img img{
max-width:100%;
max-height:100%;
}
#sperator .circle{
position:absolute;
height:66px;
width:66px;
background-color:black;
top:50%;
left:50%;
margin:-33px auto auto -33px;
border-radius:50%;
z-index:100;
text-align:center;
}
#sperator .circle p{
font-size:35px;
font-family:futura-book;
color:white;
padding:0 !important;
margin:0;
line-height:60px;
}
.step::after{
content:'';
height:100%;
width:3px;
left:50%;
margin-left:-2px;
z-index:90;
position:absolute;
background-color:black;
}
potition:relative will be an area that will "lock" every potition:absolute inside it.
You can use position:relative as parent div and position:absolute as child div.