JSFiddle - React, Tailwind, and code Playground

by Thomas Upton

HTML

<div class="page" id="with-sidebar">
    <div id="container">Container</div>
    <div id="sidebar">Sidebar</div>
</div>

<br class="clear" />

<div class="page" id="no-sidebar">
    <div id="container2">Container</div>
</div>

CSS

.page {
    margin-bottom: 25px;
    height: 200px;
    width: 200px;
}

.page > * {
    float: left;
    border: 1px solid black;
    height: 50px;
}

.clear {
    clear: both;
    display: block;
}

JavaScript

var sidebar = document.getElementById("sidebar");
var sidebar2 = document.getElementById("sidebar2");

function setPadding(sidebar_elem, container) {
    if (sidebar_elem == null) {
        container.style.paddingRight = "0";
    } else {
        var sidebar_width = sidebar_elem.offsetWidth;
        container.style.paddingRight = sidebar_width + "px";
    }
}

setPadding(sidebar, document.getElementById('container'));
setPadding(sidebar2, document.getElementById('container2'));