I would like to set the size of the text to be dynamic/flexible depending on the window size with Javascript

Question

I am trying to set the size of the text to be responsive to the window width.

I am using this script

    flexFont = function () {
    var divs = document.getElementsByClassName("flexFont");
    for(var i = 0; i < divs.length; i++) {
        var relFontsize = divs[i].offsetWidth*0.05;
        divs[i].style.fontSize = relFontsize+'px';
    }
    for(var y = 0; y < divs.length; y++) {
        var relLineHeight = divs[y].offsetWidth*0.1;
        divs[y].style.lineHeight = relLineHeight+'px';
    }
};

window.onload = function(event) {
    flexFont();
};
window.onresize = function(event) {
    flexFont();
};

  .text-content-title{
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-size: 1.8em;
    padding-bottom:20px;
  }
  
  .text-content{
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-size: 1em; 
    font-weight: 400;
    line-height: 1.6em;
    padding:5px 0;
    color: #000;
/*     width:70vw; */
    padding: 20px 0;
  }

.text-container{
  width:35vw;
}

<div class="text-container">
        <h2 class="text-content-title flexFont flexLineHeight">Language Skills</h2>
        <p class="text-content flexFont flexLineHeight" id="myDIV">I have always been fascinated by different cultures, habits, mindsets, and the interaction and diversity of people with different backgrounds.
I firmly believe the best way to learn about another culture is to start to learn their language.

I am also convinced if you get in contact with people in the language they know the best that not only shows your interest but will make the communication smooth and comfortable.
        </p>
      </div>

This is the HTML part

My issue is that this overwrites my CSS settings and instead of making the size dynamic, sets a different size that is very different from how I would like it to be. My question is: Should I make a different variable for each size or there is something that I am missing?