JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<body>
<div class="flexcontainer1">
  <div class="txt1"> Some text here </div>
</div>
<div class="flexcontainer2">
  <div class="row">
    <div class="txt2"> Some more text </div>
    <div class="txt2"> Even more text </div>
  </div>
</div>
</body>
</html>

CSS

.flexcontainer1 {
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
        height: 250px;
        width: 100%;
        border: 1px solid black;
}

.flexcontainer2 {
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
        height: 150px;
        width: 100%;
        border: 1px solid black;
}

.row {
        width: auto;
}

.txt1 {
        font-size: 3.0vw;
}

.txt2 {
        font-size: 2.2vw;
}