JSFiddle - React, Tailwind, and code Playground

by jhogervorst

HTML

<div id="wrapper">
    <div id="button1">Absolute positioned (goes outside the red parent element)</div>
    <div id="button2">Floated (inside the red parent element)</div>
</div>

CSS

#wrapper {
    width: 300px;
    height: 300px;
    background: red;
}

#button1, #button2 {
    width: 150px;
    height: 60px;
    background: orange;
}

#button1 {
    position: absolute;
    top: 5px;
    right: 5px;
}

#button2 {
    float: right;
    margin-top: 5px;
    margin-right: 5px;
}