markdown guide
 

If I understand the question correctly, you can achieve this using css grid!

If you need the blue box header, you can format your grid as (roughly):

.container {
    display: grid;
    grid-template-rows: {headerheight} 1fr;
    grid-template-columns: 1fr 1fr;
}

Then you can place a div on the left side area and add padding to format it like this.

Informative guides that may help:
Grid: css-tricks.com/snippets/css/comple...
Flexbox: css-tricks.com/snippets/css/a-guid...

 

Thanks for the reply. I guess add padding is one of the solution to achieve the above design. But is there any other ways ?
I would definitely try the padding one. :)

 

You could use flexbox instead.

That way if you have a lot of text, it won't still start halfway down the page.

Classic DEV Post from Jul 19 '18

What happens when you type 'google.com' into a browser and press Enter?

My most favorite interview question ever.

Saugat Rai profile image