Offset Header

With CSS Grid

How I Did It

The main element is my grid container and specifies 3 columns: 

                    
grid-template-columns: 1fr 1fr minmax(min-content, 80ch);

Then in my HTML, I have an h1, h2, and a section for the content. Each of these elements will flow into its own column. So the h1 is in the first column, the h2 is in the second column, and the section is in the third column. Both of the first two columns are set to span the rest of the columns so as the screen gets smaller, they can collapse and render above each other, though still slightly offset. 

                    
main h1 {
    grid-column: 1 / span all;
}

main h2 {
    grid-column 2 / span all;
}

.content {
    grid-column: 3;
}

The overall container has a max-width to keep it from growing too large on larger displays, but the first two columns will grow as large as they can within that constraint.

Fake Latin

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Claudii libidini, qui tum erat summo ne imperio, dederetur. Habes, inquam, Cato, formam eorum, de quibus loquor, philosophorum. Videamus animi partes, quarum est conspectus illustrior; Scaevola tribunus plebis ferret ad plebem vellentne de ea re quaeri Duo Reges: constructio interrete. Negat enim summo bono afferre incrementum diem. Cum salvum esse flentes sui respondissent, rogavit essentne fusi hostes. Nihil minus, contraque illa hereditate dives ob eamque rem laetus.

Quid est, quod ab ea absolvi et perfici debeat?

Quo modo autem philosophus loquitur? Dicet pro me ipsa virtus nec dubitabit isti vestro beato M. Nulla profecto est, quin suam vim retineat a primo ad extremum. Qui autem esse poteris, nisi te amor ipse ceperit? De vacuitate doloris eadem sententia erit. Cur deinde Metrodori liberos commendas? An vero, inquit, quisquam potest probare, quod perceptfum, quod.

Idem adhuc;
Similiter sensus, cum accessit ad naturam, tuetur illam quidem, sed etiam se tuetur;
Immo alio genere;
Summum ením bonum exposuit vacuitatem doloris;
Si longus, levis;
Certe nihil nisi quod possit ipsum propter se iure laudari.
Reguli reiciendam;
Non quam nostram quidem, inquit Pomponius iocans;
Stoicos roga.
Similiter sensus, cum accessit ad naturam, tuetur illam quidem, sed etiam se tuetur;
  1. Atque his de rebus et splendida est eorum et illustris oratio.
  2. Quamquam ab iis philosophiam et omnes ingenuas disciplinas habemus;
  3. Ut proverbia non nulla veriora sint quam vestra dogmata.
  4. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?