JSFiddle - React, Tailwind, and code Playground
HTML
<div class="parent">
<div class="child child-1">Child 1</div>
<div class="child child-2">Child 2</div>
<div class="child absolute">Absolute</div>
</div>
CSS
.parent {
overflow: hidden;
width: 200px;
margin-top: 4em;
padding: 1em;
background: #ddd;
position: relative;
display: table;
}
.parent:after {
content: '. .';
display: block;
word-spacing: 99in;
height: 0;
overflow: hidden;
font-size: 0.13em;
line-height: 0;
}
.parent {
*zoom: 1;
}
.child {
padding: .5em;
background: green
}
.child-1 {
float: left
}
.child-2 {
float: right
}
.absolute {
position: absolute;
top: -25px;
left: -60px;
}