<p>All CSS width units, based on 10 as a multiplier and 14px font on labels.</p>

<h2>Fixed widths</h2>
<div class="in"></div>
<div class="cm"></div>
<div class="pc"></div>
<div class="mm"></div>
<div class="pt"></div>
<div class="px"></div>

<h2>Character widths</h2>
<div class="rem"></div>
<div class="em"></div>
<div class="ch"></div>
<div class="ex"></div>

<h2>Flexible widths</h2>
<div class="vw"></div>
<div class="pct"></div>

:root{
  --chars:10;
}

h2{margin-bottom:4px;font-size:140%}

body{
  padding:8px;
  &>div{
    font-size:14px;
    --h:28px;
    background:#999;
    height:var(--h);
    margin:0 0 4px;
    position:relative;
    border-radius:4px;
    span{
      line-height:var(--h);
      padding-left:8px;
      position:absolute;
      width:200px;
    }
  }
}

.ch{width:calc(var(--chars)*1ch)}
.cm{width:calc(var(--chars)*1cm)}
.em{width:calc(var(--chars)*1em)}
.ex{width:calc(var(--chars)*1ex)}
.in{width:calc(var(--chars)*1in)}
.mm{width:calc(var(--chars)*1mm)}
.pc{width:calc(var(--chars)*1pc)}
.pct{width:calc(var(--chars)*1%)}
.pt{width:calc(var(--chars)*1pt)}
.px{width:calc(var(--chars)*1px)}
.rem{width:calc(var(--chars)*1rem)}
.vw{width:calc(var(--chars)*1vw)}

$( document ).ready(function() {
    $( "body>div" ).each(function( index ) {
      var cls = $(this).attr('class');
      var val = $(this).width();
      $(this).html('<span>'+cls+': '+val+'</span>')
    });
});