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 Mar 28

Recommended VS Code Extensions for Angular Developers

Recommended VS Code Extensions for Angular Developers

SaugatRai profile image