JSFiddle - React, Tailwind, and code Playground

by Mr_Vasu

HTML

<div class="mainpanel">
    <div class="mainContentwrapper">
        <!--row-->
        <div class="rowSet">
            <div class="leftpanel leftpanel-first">Pakage details</div>
            <div class="rightsontent" tgh="Pakage details">
                <div class="rightwrpper" >
                <div class="baseContent">
                    Pakage detailsPakage detailsPakage details
                    </div>
                 <div class="silrContent">silver</div>
                 <div class="gldContent">gold</div>
                </div>
            </div>

       </div>
         <!--row-->
        <div class="rowSet">
            <div class="leftpanel">Pakage details</div>
            <div class="rightsontent" tgh="Pakage details">
                <div class="rightwrpper" >
                <div class="baseContent">Base</div>
                 <div class="silrContent">silver</div>
                 <div class="gldContent">gold</div>
                </div></div>
       </div>
         <!--row-->
        <div class="rowSet">
            <div class="leftpanel">Pakage details</div>
            <div class="rightsontent" tgh="Pakage details">
                <div class="rightwrpper" >
                <div class="baseContent">Base</div>
                 <div class="silrContent">silver</div>
                 <div class="gldContent">gold</div>
                </div></div>
       </div>
         <!--row-->
        <div class="rowSet">
            <div class="leftpanel">Pakage details</div>
            <div class="rightsontent" tgh="Pakage details">
                <div class="rightwrpper" >
                <div class="baseContent">Base</div>
                 <div class="silrContent">silver</div>
                 <div class="gldContent">gold</div>
                </div></div>
       </div>
         <!--row-->
        <div class="rowSet">
            <div class="leftpanel">Pakage details</div>
            <div class="rightsontent" tgh="Pakage details">
                <div...

CSS

.mainpanel{
    width:100%;
    display:inline-block;
    border:1px solid #eee;
    border-radius:6px;
    
}
.mainContentwrapper{
    width:100%;
    height:auto;
    display:table;
    vertical-align:top;
}
.leftpanel{
    display:table-cell;
    width:30%;
    background:skyblue;
    padding:10px;
    text-align:left;
    box-sizing:border-box;
    border-bottom:1px solid #eee;
}
.leftpanel-first{
    border-radius:6px 0 0 0;
}
.leftpanel-last{
    border-radius:0 0 0 6px;
}
.rightsontent{
  display:table-cell;
    width:70%;
    vertical-align:middle;
}
.rightwrpper{
    display: table;
  width: 100%;
}
.baseContent{
  display:table-cell;
    width:33.3%;
    padding:10px 10px;box-sizing:border-box;
    vertical-align:middle;border-bottom:1px solid #eee;
}
.silrContent{
  display:table-cell;
    width:33.3%;
    padding:10px 10px;
    box-sizing:border-box;
    border-bottom:1px solid #eee;
}
.gldContent{
  display:table-cell;
    width:33.3%;
    padding:10px 10px;
    box-sizing:border-box;
    border-bottom:1px solid #eee;
}
.rowSet{
    width:100%;
    display:table-row;
    height:auto;
    padding:0;
    
}
@media (max-width:468px){
    .rightsontent::before{
        content: attr(tgh);
 display:block;
  background-color: red;
    }
    .leftpanel{
        display:none;
}

}