JSFiddle - React, Tailwind, and code Playground

by Brian Dukes

HTML

<div class="calc">This is 18px / 2 * 3</div>
<div class="div-first">This is 27px (18 / 2 is 9, 9 * 3 is 27)</div>
<div class="mult-first">This is 3px (2 * 3 is 6, 18 / 6 is 3)</div>

<div class="calc-em">This is 6em / 2 * 3</div>
<div class="div-first-em">This is 9em (6 / 2 is 3, 3 * 3 is 9)</div>
<div class="mult-first-em">This is 1em (2 * 3 is 6, 6 / 6 is 1)</div>

CSS

.calc {
    font-size: -webkit-calc(18px / 2 * 3);
    font-size: -moz-calc(18px / 2 * 3);
    font-size: -o-calc(18px / 2 * 3);
    font-size: calc(18px / 2 * 3);
}
.div-first{
    font-size: 27px;
}
.mult-first{
    font-size: 3px;
}

.calc-em, .div-first-em, .mult-first-em {background:blue;}
.calc-em {
    width: -webkit-calc(6em / 2 * 3);
    width: -moz-calc(6em / 2 * 3);
    width: -o-calc(6em / 2 * 3);
    width: calc(6em / 2 * 3);
}
.div-first-em{
    width: 9em;
}
.mult-first-em{
    width: 1em;
}