JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="sidebar">Sidebar</div>
    <div class="content">Content 80%</div>
</div>
<div class="container">
    <div class="sidebar hidden">Sidebar</div>
    <div class="content">Content 100%</div>
</div>

CSS

.container {
    width: 300px;
    border: 1px solid red;
    margin-bottom: 20px;
}
.container:after{
    content: '';
    clear: both;
    display: table;
}
.sidebar {
    float: left;
    width: 20%;
    border: 2px solid yellow;
}
.hidden {
    display: none
}
.content {
    border: 2px solid blue;
    overflow: hidden;
}