JSFiddle - React, Tailwind, and code Playground

HTML

<div id = "app">
    <div id = "custom-sidebar">
      Sidebar
    </div>

    <div id = "content-wrapper">
      <div id = "header">
        Header
      </div>

      <div id = "content">
        Content
      </div>
     
      <div id = "footer">
      Footer
      </div>
    </div>
  </div>

CSS

#content-wrapper  {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: calc(100vh - 200);  

 }

#content  {
  padding: 30px;
}

#app  {
  background-color: gray;
  display: flex;
  height: 100vh;
  font-family: 'Source Sans Pro', sans-serif;
  padding: 0;
}

 #header  {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
         align-items: flex-end;
        padding-bottom: 20px;
}

#sidebar  {
    width: 12%;
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

 #footer  {
        height: 200px;
        width: 100%;
    }
    
/*
  Colors
*/

#custom-sidebar  {
 background-color: orange;
}

#footer  {
  background-color: green;
}

#header  {
  background-color: red;
}

#content  {
  background-color: silver;
}