JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button" class="em">em</button>

<button type="button" class="px">px</button>

<!-- OK, I guess this is basic web development 101 ... But why aren't these two buttons the same size? -->

CSS

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 16px;
}

.em {
  position: relative;
  width: 9.375em; /* 150px */
  height: 3.125em; /* 50px */
  background: #18a397;  
  text-align: center;
  margin: 1em;
  font-size: inherit;
}

.px {
  position: relative;
  width: 150px; /* 9.375em */
  height: 50px; /* 3.125em */
  background: #18a397;  
  text-align: center;
  margin: 16px;
  font-size: inherit;
}