JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title></title>
    
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
    
<style type="text/css">
div {
    width: 250px;
    border: 1px solid #999;
    margin: 10px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    white-space: nowrap;
}
.block_1 {
    font-size: 42px;
}
.block_2 {
    font-size: 15px;
}
.block_3 {
    font-size: 10px;
}
.block_4 {
    font-size: 40px;
    overflow: hidden;
}
.block_5 {
    font-size: 43px;
}
</style>
</head>
<body>
    <div class="block_5">Lorem ipsum dolor</div>
    
    <div class="block_4">Lorem ipsum dolor</div>

    <h1>Как надо</h1>
    <div class="block_1">Lorem ipsum</div>
    
    <div class="block_2">Lorem ipsum dolor sit amet, consectetur</div>
    
    <div class="block_3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed</div>
    </div>
</body>
</html>