JSFiddle - React, Tailwind, and code Playground

HTML

<div id="left_side">
<img src="http://www.philosophy.utoronto.ca/wp-content/uploads/2013/03/robbie-300x300.jpg">
  
</div>



<div id="content">
a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
</div>

CSS

body {   
width: 100%;
height: auto;
padding: 0;
margin: 0px auto;
font-family: Calibri, Georgia, Ubuntu-C;  
font-size: 16px;
margin: 0PX
}



#left_side{
height: 98%;
min-width:50%;
background:url(http://www.500milligrammes.com/facticemagazine/final/addon/menupage/background.jpg) no-repeat top left fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow:hidden; 
position:absolute;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.http://www.500milligrammes.com/facticemagazine/final/addon/menupage/background.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.500milligrammes.com/facticemagazine/final/addon/menupage/background.jpg', sizingMethod='scale')";
}

#content{
height: 98%;
width:50%;
overflow:auto;
padding: 0px;
margin-left: 50%;
background:ORANGE;
position:absolute;
}
@media (max-width: 1024px){
    #left_side  {   
        width:100%;
    }
    #content{
        width:100%;
        position:static;
        margin: 0px;
    }
}