Feature comparison

<div class="container">
<!-- Feature name -->
<div class="container__feature">
...
</div>
<!-- The model -->
<div class="container__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 -->
...
.container {
align-items: center;
display: flex;
/* Bottom border */
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
/* Spacing */
padding: 12px 0px;
}
.container__feature {
/* Take available width */
flex: 1;
/* Spacing */
margin-right: 16px;
}
.container__model {
/* Center the content */
display: flex;
justify-content: center;
/* Spacing */
margin-right: 16px;
}

See also

Feature list

Pricing table