JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<!-- sidebar-left, sidebar-right, sidebar1, sidebar2, sidebar-none -->

<div class="sidebar1 sidebar-left">
    <div id="content">Content</div>
    <div id="sidebar">Sidebar</div>
</div>

<div class="row sidebar2">
    <div id="sidebar-narrow">Narrow</div>
    <div id="content">Content</div>
    <div id="sidebar">Sidebar</div>
</div>

<div class="row sidebar-none">
    <div id="content">Content</div>
</div>

CSS

.row {
 clear: both; 
  margin: 0 0 20px 0;  
}

/****************************************************/
/****************************************************/

#content, #sidebar, #sidebar-narrow {
 display: block;
  float: left;  
   background: red;
    margin: 2.5%;
}
.sidebar1 #content {
    width: 55%;
    
}
.sidebar1 #sidebar {
    width: 35%;
}
.sidebar-left #content {
     float: right;   
}
.sidebar-none #content {
    width: 95%;
}

/****************************************************/
/****************************************************/