body { max-width: 800px; width: 100%; margin: auto; position: relative; padding: 2rem; } h1 { font-size: 3rem; } h2 { font-size: 2rem; margin: 0; } h3 { font-size: 1.5rem; font-weight: 800; } hr { border: .1em solid black; width: 25%; margin: auto; margin-top: 2rem; margin-bottom: 1rem; } summary { display: grid; grid-template-columns: 2fr 1fr; cursor: pointer; list-style: none; } summary>:first-child { grid-column: 1; grid-row: 1; text-align: left; } summary>:last-child { grid-column: 2; grid-row: 1; text-align: right; } summary h3, summary p { margin: 0; } summary strong { font-variant: small-caps; font-weight: normal; } summary>* { align-self: center; } details { margin: 1em 0; } details .place, details .date { font-style: italic; font-size: .9rem; } details .place { color: #8bc34a; }