GitHub 6956★

Have you seen CSS Scan?

The fastest and easiest way to check, copy and edit CSS.

Learn more →

CSS Scan logo

Property list

HTML

<!-- A property item -->
<dl class="property-list">
<!-- Property name -->
<dt class="property-list__key">...</dt>

<!-- Property value -->
<dd class="property-list__value">...</dd>
</dl>

<!-- Repeat other items -->
...

CSS

.property-list {
/* Content is center horizontally */
align-items: center;
display: flex;

border-bottom: 1px solid #d1d5db;

/* Spacing */
margin: 0;
padding: 0.25rem 0;
}
.property-list__key {
/* Take the available width */
flex: 1;
}
.property-list__value {
margin-left: 0.5rem;
}
Demo
Follow me on and to get more useful contents.