CSS Positioning 70-30 with Inline-Block

Question

I am positioning main-bar and side-bar with 70-30 ratio as under: JSFIDDLE

Answer 1

You have to remove white space between divs as it also take place and doesn't let inline-blocks align properly.

.main-bar, .side-bar {
    position: relative;
    margin: 0;
    padding: 0;
    outline: 0;
    display: inline-block;
    border: none;
    background: #CCC;
}
.main-bar {
    width: 70%;
}
.side-bar {
    width: 30%;
}

    I am the King!

   I am not less!

Reference: Fighting the Space Between Inline Block Elements