JSFiddle - React, Tailwind, and code Playground

HTML

<div id='img'>
  IMG
</div>

<div id='sidebar'>
  SIDEBAR
  <br />
  <br />
    We have a single div for each of the 4 main areas of the layout — header, content, sidebar, and footer. All four divs are wrapped inside a container div, which we’ll use to center and set the width of the page.

One thing to note is the structure of the html above follows the structure of the page itself. The header comes first in both and the footer comes last. The content area div is before the sidebar.

Later in this post I’ll offer two ways to change the layout above so the sidebar is to the left of the content. One of those ways is as simple as changing a single word in the css.

The CSS
If you’ve already viewed the source code of the demo you’ll note the css like the html is rather simple. In fact most of that css has been added solely to make the demo a little more presentable.

Here’s all the css you need for this layout minus the stuff to make the demo more presentable.
  <br />
</div>

<div id='mainContent'>
  MAIN CONTENT
  <br style='clear:both' />
</div>

CSS

#img {
  background:green;
  float:left;
  height:100px;
  width:200px;
}

#sidebar {
  background:red;
  clear:both;
  float:left;
  width:200px;
}

#mainContent {
  background:yellow;
  margin-left:200px;
}