JSFiddle - React, Tailwind, and code Playground

by QMaster

HTML

<div class="WholeDiv">
    
<div id="headerr" class="mainContainer">

    <!--<div class="sideGap" style="display: inline;">                        
    </div>-->
                
    <div class="firstContent">
        
        <div id="dv" class="mainContainerVert" >
            <div class="dvRow"><span class="spnFirst">1111111111111111111111</span></div>
            <div class="dvRow"><span class="spnFirst" >22222</span></div>
            <div class="dvRow"><span class="spnFirst" >333333</span></div>
        </div>
        
       <!--
        <div>
            <div class="infoTextFirst1"><span class="aSimple" >1111111111111111111111111111111111111111111</span></div>
            <div class="infoTextFirst1"><span class="aSimple" >2222222</span></div>
            <div class="infoTextFirst1"><span class="aSimple" >33333333</span></div>
            
                       
        </div>
           -->             
                    
    </div>
           
    <div class="secondContent">

        <img alt="" class="mainPic" data-displayid="007" data-elementitemid="003" data-entityid="003" data-itemid="100000000000007" src="http://www.viraapp.com/Home/GetItemThumbnailImage?entityId=003&amp;itemId=100000000000007&amp;elementItemId=003&amp;displayId=007">
    
                
    </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 class="sideGap" style="display: inline;">
    </div>-->
            
</div>
    
<div class="nameHolder">
    <div class="infoTextMiddle1" ><span >Names Dictionary</span></div>
    <div class="infoTextMiddle2" ><span >Ten Thousand Words of Persian Names </span></div>
</div>    

<div class="priceHolder">
   ...

CSS

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

.aSimple {
    color: #F3F3F4;
    background-color: transparent;
    outline: medium none;
    text-decoration: none;
    cursor: pointer;
    vertical-align: top;
    font-size: 18px;
    font-weight: normal;
}

.mainPic{
    vertical-align: middle;
}

.MarginWrapperDiv{
    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;

    
    /*justify-content: center;*/
    
    background-color: blue;
    min-width: 512px;
    
    height: 232px;
    line-height: 232px;
    
    /*
    align-self: right; 
    */
    
    /*
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    */
    
    /*
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    */
    
    z-index: 999;
    
    text-align: center;
    top: 0px;
    /*position: static;*/
    width: 100%;
}

.mainContainer .sideGap
{
    /*display: inline;*/
    /*flex-grow: 1;*/ 
    width: 40px; 
    min-width: 40px; 
    max-width: 40px; 
    background-color: yellow;
}

.mainContainer .headerIcon{
    flex-grow: 1;    
    background: gray;
    min-width: 48px;  
    max-width: 48px;  
    height: 48px;
    vertical-align: middle;
}

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


.mainContainer .secondContent {
    /*text-align: center;*/
   ...