JSFiddle - React, Tailwind, and code Playground

by QMaster

HTML

<div class="WholeDiv">
    
<div id="headerr" class="mainContainer">
                
    <div class="firstContent">
        
        <div id="dv" class="mainContainerVert" >
            <div class="dvRow"><span class="spnFirst" style="color: yellow;">This is the bug >>> 111111111111</span> </div>
            <div class="dvRow"><span class="spnFirst">222</span></div>
            <div class="dvRow"><span class="spnFirst">333</span></div>
        </div>      
    </div>
           
    <div class="secondContent">

        Center Content
    
                
    </div>
    
    <div class="thirdContent">
       <div id="dv" class="mainContainerVert" >
            <div class="dvRow"><span class="spnThird">111</span> </div>
            <div class="dvRow"><span class="spnThird">222</span></div>
            <div class="dvRow"><span class="spnThird">333</span></div>
        </div>            
    </div>

            
</div>

CSS

html, body {
    direction: rtl;
    font-family: 'Times New Roman';
}

.WholeDiv{
    margin-right: 20px;
    margin-left: 20px;
    background-color: #ffffff;
    border: 2px solid #e8e8e8;
}

.mainContainer{
    
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    
    background-color: blue;
    min-width: 512px;
    
    height: 232px;
    line-height: 232px;
    
    z-index: 999;
    
    text-align: center;
    top: 0px;
    width: 100%;
}

.mainContainer .firstContent {
    flex: 1 1 auto; 
    background: green;
    overflow: hidden;
    min-width: 140px;
    
    text-align: right; 
}

.mainContainer .secondContent {
    width: 232px;
    min-width: 232px;
    background-color: aqua;
}

.mainContainer .thirdContent {
    flex: 1 1 auto; 
    background-color: red;
    overflow: hidden;
    min-width: 140px;
    
    text-align: left;
}

.mainContainerVert{
    
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
       

    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    
    
    -webkit-box-pack: space-around;
    -moz-box-pack: space-around;
    -ms-flex-pack: space-around;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    
    -webkit-flex-flow: column no-wrap;
    flex-flow: column no-wrap;    
    
    
    
    -webkit-align-content: center;
    align-content: center;
    
    background-color: blue;
    /*min-width: 100px;*/
    height: 232px;
    line-height:...