JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<div id="main">
   <div class="vinhalt">
     <h3 align="center">&Uuml;berschrift</h3>
     <div class="tabelle">
       <div class="tr">
         <div class="td lspalte">
           Zelle 1 1
         </div>
         <div class="td rspalte">
           <input type="text">
         </div>
       </div>
       <div class="tr">
         <div class="td lspalte">
           Zelle 2 1
         </div>
         <div class="td rspalte">
           <input type="text">
         </div>
       </div>
     </div>
   </div>
</div>

CSS

#main {
   display:block;
   background:#ffede0;
   border-radius:0.5em;
   border:1px solid #df6c20;
   padding:10px;
   margin:10px
}     
#main .vinhalt {
   display:block;
   background:#ff6347
} 
#main .vinhalt .tabelle {
   display:table;
   width:100%;
   padding:10px;
   box-sizing:border-box;
   border-collapse:collapse;
   background:#f08080
}
#main .vinhalt .tabelle .tr {
   display:table-row
}
#main .vinhalt .tabelle .tr .td  {
   display:table-cell;
   vertical-align:middle;
   padding:15px 0;
   box-sizing:border-box;
   border:3px solid #ff6347
}
#main .vinhalt .tabelle .tr .td.lspalte {
   width:33%
}    
#main .vinhalt .tabelle .tr .td.rspalte {
   width:66%
}