JSFiddle - React, Tailwind, and code Playground

by Soviut

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="base">
  <input type="number">
  <div class="something">
    Something
    <input type="number">
  </div>
  
  <div class="another">
    Another
    <input type="number">
  </div>
</div>

CSS

html {
  font-size: 10px;
}

.base, .base * {
  border: solid 1px cornflowerblue;
}

.base {
  font-size: 2em;
  padding: 1em;
}

.something {
  font-size: 2em;
  padding: 2rem;
}

.another {
  font-size: 1rem;
  padding: 3rem;
}

JavaScript

$('input[type=number]').on('change', function() {
	$(this).parent().css('font-size', $(this).val() + 'rem');
});