I'm new to html&css, I'm trying to set the following grid system:
[current state](https://i.stack.imgur.com/XZR0y.png)

look like this:
[desired solution](https://i.stack.imgur.com/r5rBP.png)

My html code consists of 2 main divs (for each 'row'), each one contains 2 divs (logo + notes, nav + content)
I've used display: inline-block in each div, but still can't figure out how to place the blue box directly under the yellow one?
I prefer a solution without jquery plugins, the simplest solution there is
thanks

Code:

```css
.header {
  display: inline-block;
  width: 100%;
}
.logo {
  display: inline-block;
  width: 30%;
  height: 100px;
  background-color: red;
}
.notes {
  display: inline-block;
  width: 69%;
  height: 50px;
  background-color: yellow;
}
.nav {
  display: inline-block;
  width: 30%;
  height: 50px;
  background-color: green;
}
.content {
  display: inline-block;
  width: 69%;
  height: 50px;
  background-color: blue;
}
```

```html
<div class="header">
  <div class="logo">
    Logo
  </div>
  <div class="notes">
    Notes
  </div>
</div>
<div class="main">
  <div class="nav">
    Nav
  </div>
  <div class="content">
    Content
  </div>
</div>
```