GitHub 6740★

Have you seen CSS Scan?

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

Learn more →

CSS Scan logo

Feature comparison

HTML

<div class="feature-comparison">
<!-- Feature name -->
<div class="feature-comparison__feature">
...
</div>

<!-- The model -->
<div class="feature-comparison__model">
<!--
For the first row: display the model name (Basic, Pro, etc.)
From the second row: display a yes/no icon indicating the feature is available or not
-->

...
</div>

<!-- Repeated other models -->
...
</div>

<!-- Repeated items -->
...

CSS

.feature-comparison {
align-items: center;
display: flex;

/* Bottom border */
border-bottom: 1px solid #d1d5db;

/* Spacing */
padding: 0.25rem 0;
}

.feature-comparison__feature {
/* Take available width */
flex: 1;
}

.feature-comparison__model {
/* Center the content */
display: flex;
justify-content: center;
}
Demo
Follow me on and to get more useful contents.