JSFiddle - React, Tailwind, and code Playground

HTML

This is some outside content.
<div id="test">
    I have small amount of content.
</div>
And some more afterwards.
<div id="abs">
    I'm absolute and have the size of my content.
</div>
<div id="float">
    I'm floating and have correct size as well.
</div>

CSS

#test {
    display: inline-block;
    background: #ccc;
}
#test:before{ content: "display"; color: red; font-size: .75em; }
#abs {
    position: absolute;
    width: auto; /* optional */
    height: auto; /* optional */
    background: #ddd;
}
#abs:before{ content: "position"; color: red; font-size: .75em; }
#float {
    float: right;
    background: #ddd;
}
#float:before{ content: "float"; color: red; font-size: .75em; }