JSFiddle - React, Tailwind, and code Playground

by chimos

HTML

<div id="container">
    <div id="content"></div>
    <div id="logo"></div>
</div>

CSS

body {
    padding: 50px;
}
#content {
    background-color: lightblue;
    height: 200px;
    width: 100%;
    float: left;
}
#logo {
    background-color: green;
    width: 50px;
    /*unknown width*/
    height: 50px;
    float: right;
}

JavaScript

$(document).ready(function () {

    var logoWidth = $('#logo').width(),
        docWidth = $(document).width(),
        marginB = $('body').outerWidth(true) - $('body').outerWidth(),
        paddingB = $('body').innerWidth() - $('body').width(),
        borderB = $('body').outerWidth() - $('body').innerWidth();

    $('#content').width(docWidth - logoWidth - marginB - paddingB - borderB);

});