JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<div class="layout">
    <div class="main">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo nihil vero explicabo doloremque deserunt velit exercitationem qui omnis praesentium distinctio quae rerum molestias vitae fugit consequatur maiores iure minima harum?
        </p>
    </div>
    <div class="sidebar">
        <div class="header">
            title
        </div>
        <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi minima fuga ducimus officiis sapiente sit impedit enim accusamus nisi voluptatum omnis accusantium aut quia. Atque neque enim quas sapiente explicabo.</p>
        </div>
    </div>
</div>

CSS

body {
    background: #eee;
}
p {
    margin: 0;
}
.layout {
    width: 90%;
    margin: 0 auto;
}
.layout:after {
    clear: both;
    
    content: '';
}
.main {
    float: left;
    width: 60%;
}
.sidebar {
    float: right;
    width: 35%;
}
.sidebar .header {
    padding: 5px 10px;
    
    background: blue;
    
    -webkit-border-radius: 10px 10px 0px 0px;
    border-radius: 10px 10px 0px 0px;
}
.sidebar .content {
    background: #fff;
    
    -webkit-border-radius: 0px 0px 10px 10px;
    border-radius: 0px 0px 10px 10px;
}