JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<div id="wrapper">

<div id="main">
    main content goes here brah brah brahcontent goes here brah brah brahcontent goes here brah brah brahcontent goes here brah brah brahcontent goes here brah brah brahcontent goes here brah brah brahcontent goes here brah brah brahcontent goes here brah brah brahcontent goes here brah brah brah
</div>
    
    <div id="el2">element tonight is young yeah!</div>
    <div id="el3">
        element 3
    </div>
    
</div>

CSS

#wrapper {
    margin: 0 150px;
    border: 1px solid purple;
}
#wrapper:after {
    content:'';
    clear:both;
    display: table;
}
#main {
    float: left;
    background-color: yellow;
}
#el2, #el3 {
    position: relative;
}
#el2 {
    float: left;
    width: 150px;
    background-color: green;
    margin-left: -100%;
    left: -150px;
}
#el3 {
    background-color: red;
    width: 150px;
    float: right;
    margin-right: -150px;
}