OOOOPS. Your browser seems to be too old for this. Please update your browser.
Teutonic CSS
Use it


Add a .column to a .flex container, to change the flex-diretion from row to column. Note how the right column here defines the height of all columns by it’s contents and how the price is always aligned on the bottom.

SCSS: _flex.scss

Pricing Table


competently negotiate extensible

  • 5 items
  • 10 friends
  • 10 undoes


progressively pontificate 24/365

  • 10 items
  • 20 friends
  • 20 undoes
  • 20 benchmarks


holisticly aggregate data

  • 20 items
  • 40 friends
  • 40 undoes
  • 40 benchmarks
  • 40 rollbacks
  • 80 snapshots
<h3 class="pa-b_s bo-b_xs">Pricing Table</h3>
<div class="grid gap-no collapse-p">
  <div class="box pa-no flex column span-4">
    <div class="pa_m bg-a">
      <p class="text-clip ma-t_s">competently negotiate extensible</p>
      <ul class="ma-t_m bo-t_px">
        <li class="pa-v_xs">5 items</li>
        <li class="pa-v_xs">10 friends</li>
        <li class="pa-v_xs">10 undoes</li>
    <div class="span-auto text-right text_xxxl pa_m bg-a ma-t_xs">
      <span class="text-thin"></span>10
  <div class="box pa-no flex column span-4 bs_l zi-1">
    <div class="pa_m bg-b">
      <p class="text-clip ma-t_s">progressively pontificate 24/365</p>
      <ul class="ma-t_m bo-t_px">
        <li class="pa-v_xs">10 items</li>
        <li class="pa-v_xs">20 friends</li>
        <li class="pa-v_xs">20 undoes</li>
        <li class="pa-v_xs">20 benchmarks</li>
    <div class="span-auto text-right text_xxxl pa_m bg-b ma-t_xs">
      <span class="text-thin"></span>100
  <div class="box pa-no flex column span-4">
    <div class="pa_m bg-c">
      <p class="text-clip ma-t_s">holisticly aggregate data</p>
      <ul class="ma-t_m bo-t_px">
        <li class="pa-v_xs">20 items</li>
        <li class="pa-v_xs">40 friends</li>
        <li class="pa-v_xs">40 undoes</li>
        <li class="pa-v_xs">40 benchmarks</li>
        <li class="pa-v_xs">40 rollbacks</li>
        <li class="pa-v_xs">80 snapshots</li>
    <div class="span-auto text-right text_xxxl pa_m bg-c ma-t_xs">
      <span class="text-thin"></span>1000