JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block_1"><p>div1</p></div>
<div class="block_2"><p>div2</p></div>
<div class="fixed_">fixed</div>

CSS

.block_2,.block_1{
border:1px solid red;
background:#ccc;
height:500px;
}
.block_1{
float:left;
width:50%;
}

.block_2{
float:right;
width:50%;
margin-left:-4px;
}
p{
box-shadow: 0 0 5px;
height:50px;
width:50px;
background:orange;
border:1px solid red;}
.fixed_{
position:fixed;
left:50%;
margin-left:-52px;
width:50px;
height:50px;
top:105px;
background:orange;}