<section class="abs-units">
  <div class="cm"></div>
  <div class="mm"></div>
  <div class="in"></div>
  <div class="q"></div>
</section>

BODY {
  min-height: 100vh;
  display: grid;
  justify-items: center;
  align-items: center;
  font-size: 1rem;
}

.abs-units {
  outline: 1px solid #DDD;
  
  div { 
    position: relative;
    margin: .75rem;
    padding: .5rem 0;
    text-align: center;
    
    &::before {}
  }
}

.cm {
  // 1cm = 96px/2.54
  width: 10cm;
  background: pink;
  
  &::before {
    content: '10cm'
  }
}
.mm {
  width: 100mm;
  background: palegoldenrod;
  
  &::before {
    content: '100mm'
  }
}

.in {
  // 1in = 2.54cm = 96px
  width: 3.937in;
  background: palegreen;
  
  &::before {
    content: '3.937in = 10cm';
  }
}
.q {
  // 1Q = 1/40th of 1cm
  width: 400q;
  background: paleturquoise;
  
  &::before {
    content: '400q = 10cm'
  }
}