JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button" class="em">button em</button>
<button type="button" class="rem">button rem</button>
<button type="button" class="px">button px</button>
<!-- OK, I guess this is basic web development 101 ... But why aren't these two buttons the same size? -->
<div type="button" class="em">div em</div>
<div type="button" class="rem">div rem</div>
<div type="button" class="px">div px</div>


<button>Unstyled button text</button>
<div>Unstyled div text</div>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 18px;
}
.em {
    position: relative;
    width: 9.375em;
    /* 150px */
    height: 3.125em;
    /* 50px */
    background: #18a397;
    text-align: center;
    margin: 1em;
}
.rem {
    position: relative;
    width: 9.375rem;
    /* 150px */
    height: 3.125rem;
    /* 50px */
    background: #18a397;
    text-align: center;
    margin: 1rem;
}
.px {
    position: relative;
    width: 150px;
    /* 9.375em */
    height: 50px;
    /* 3.125em */
    background: #18a397;
    text-align: center;
    margin: 16px;
}