JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sectionDown">
    <div class="sectionDownSide" style="float:left;"></div>
    <div class="sectionDownSide" style="float:right;"></div>
    <div style="clear:both;"></div>
    <div class="center">
        <div class="sectionDownContainer">
            <div class="sectionDownMenu"></div>
            <div class="sectionDownContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc commodo
                convallis elit ut dapibus. Proin augue magna, sollicitudin at placerat
                ut, dapibus vel urna. Duis venenatis massa et diam porttitor tempor. Integer
                varius nulla eu est adipiscing facilisis. Maecenas sagittis volutpat nulla
                a placerat. Nunc et erat elit, non pellentesque libero. Proin dictum mauris
                vel leo faucibus pretium. Sed lacus eros, dignissim sit amet scelerisque
                et, tempor vitae est. Quisque ligula ipsum, pellentesque at interdum at,
                imperdiet sed nisi. Nullam tempor neque eu nibh posuere vehicula nec sed
                quam. Pellentesque et massa tellus, eu dapibus tellus. Fusce vel hendrerit
                lorem. Donec nec sem dui. Sed vestibulum, nulla nec sollicitudin pellentesque,
                metus mauris blandit quam, a semper tellus est eu felis. Phasellus tincidunt
                vulputate odio ut interdum. Sed eget facilisis quam. Nunc ullamcorper congue
                quam a lacinia. Donec aliquet suscipit velit, eget dapibus arcu viverra
                eget. Cras ornare, nunc nec ullamcorper porta, nisl libero gravida justo,
                a faucibus nulla orci vitae odio. Pellentesque a elit eu mauris varius
                iaculis vel eget quam. Aliquam id erat adipiscing metus convallis varius.
                Suspendisse dictum cursus ultrices. Class aptent taciti sociosqu ad litora
                torquent per conubia nostra, per inceptos himenaeos. Donec id ipsum ac
                magna volutpat posuere. Aliquam erat...

CSS

.center {
    width:980px;
    margin:0 auto;
}
#sectionDown {
    width: 100%;
    position: relative;
    min-width: 980px;
}
.sectionDownSide {
    height: 270px;
    width:100px;
    position: relative;
    top: -32px;
    background-color:green;
}
.sectionDownContainer {
    width: 980px;
    height:270px;
    border:1px solid red;
    position: absolute;
    top: -32px;
    z-index: 999;
}
.sectionDownMenu {
    margin-left: 50px;
    margin-top: 1px;
    display: block;
}
.sectionDownContent {
    width: 640px;
    margin-top: 100px;
    margin-left: 50px;
}
#footer {
    height: 142px;
    width:100%;
    min-width: 980px;
    background-color:blue;
}

JavaScript

$(document).ready(function(){
    var x = $(document).width();
	var xy=(x-980)/2;
	if(xy>0){
		$('.sectionDownSide').css('width',xy);
	}
	else{
		$('.sectionDownSide').css('display','none');
	}
});


$(document).ready(function(){
    $(window).resize(function () {
        var s = $(document).width();
		var ns = (s - 980) / 2;
		if (ns == 0) {
		    $('.sectionDownSide').css('display', 'none');
        }else {
		    $('.sectionDownSide').css('display', 'block');
            $('.sectionDownSide').css('width', ns);
		}
    });
});