<div class="component">
  <h2>Heading</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem beatae sint, doloribus dicta eius iure explicabo quibusdam sit in, tenetur praesentium est provident odio consectetur officiis consequatur placeat amet exercitationem?</p>
</div>

/* general styles : not required
==========================================================*/

html,body{height:100%;padding:0;margin:0;}body{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;background:#f2f2f2;}

.component {
  margin: auto;
  padding: 1rem;
  background: #3E6CF9;
  color: white;
}


/* required styles : WebKit Nightly as of 10/24/17
==========================================================*/

.component {
  width: min(max(100px * 2, 50vw), 500px); /* could write 200px. just showing calc-less math is allowed */
  font-size: min(max(1.25rem, 4vw), 2rem);
}