<div class="container-box">
  <p class="vw-para">The font size of this paragraph should change with viewport width. (3vw)</p>
  <p class="vh-para">The font size of this paragraph should change with viewport height. (5vh)</p>
  <p class="vmin-para">The font size of this paragraph should change based on the minimum of viewport width or height. (5vmin)</p>
  <p class="vmax-para">The font size of this paragraph should change based on the maximum of viewport width or height. (3vmax)</p>
</div>

body {
  font-family: 'Lato';
  margin: 50px 20px;
}

.container-box {
  border: 1px solid black;
  padding: 10px;
  background: wheat;
}

html {
  font-size: 62.5%;
}

div {
  margin-bottom: 80px;
}

.vw-para {
  font-size: 3vw;
}

.vh-para {
  font-size: 5vh;
}

.vmin-para {
  font-size: 5vmin;
}

.vmax-para {
  font-size: 3vmax;
}