Basically I am trying to recreate this image:

https://imgur.com/a/OcgGfmn

But struggling on the LightBlue and Red section on putting them on the same line:

 .sidebar {
    background-color: lightblue;
    width:20%;
    min-height:100px; 
}
.content {
    background-color: red;
    width:80%;
    min-height:100px;
}

So far I have tried Flex, inline-block and changing the widths, but cannot seem to get them from not appearing under each other

Inmy container I have:

.container {
    display:grid;
    grid-template-areas: 
    "navbar navbar navbar navbar"        
    "sidebar content"
    "footer footer footer footer"
}

CodePudding user response：

See below. Using grid-area for all relevant classes and width removed for sidebar and content.

.navbar {
  grid-area: navbar;
  background-color: lightgreen;
}

.sidebar {
  background-color: lightblue;
  min-height: 100px;
  grid-area: sidebar;
}

.content {
  background-color: red;
  min-height: 100px;
  grid-area: content;
}

.footer {
  grid-area: footer;
  background-color: lightgreen;
}

.container {
  display: grid;
  grid-template-areas: "navbar navbar navbar navbar" "sidebar content content content" "footer footer footer footer"
}

<div >
  <div >navbar</div>
  <div >sidebar</div>
  <div >content</div>
  <div >footer</div>
</div>