My goal is to have the two squares on each side come together and overlap in the center of the wrapper. However, I'm facing an issue where one square drops down a level once they are brought together. I'm unsure if this can be fixed with jQuery or CSS.
To view my code, click here
$(document).ready(() => {
$(".square").animate({
backgroundColor: "red",
}, 3000);
$("#squareOne").animate({
marginLeft: "+=45%",
}, 800);
$("#squareTwo").animate({
marginRight: "+=45%",
}, 800);
});#wrapper {
width: ...;
margin: 100px auto;
border: 1px solid black;
}
.square {
width: 100px;
height: 100px;
border: 1px solid black;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 10% 30px;
}
#squareTwo {
position: relative;
float: right;
}
#squareOne {
position: relative;
background: #fff;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="wrapper">
<div class="square" id="squareOne"></div>
<div class="square" id="squareTwo"></div>
</div>
</body>