JSFiddle - React, Tailwind, and code Playground

by jt3k

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Две колонки одной высоты</title>
  <style type="text/css">

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;}


   .layout {
    border-left: 200px solid #c7e3e4; 
                 /* Ширина границы и цвет левой колонки */
    background: #e0d2c7; /* Цвет фона правой колонки */
   } 
   .col1 {
    width: 180px; /* Ширина левой колонки без полей */
    float: left; /* Превращаем в плавающий элемент */
    margin-left: -100px; /* Сдвигаем все влево на ширину границы */
   }
   .col1, .col2 { padding: 10px; }
   .clear { clear: both;  /* Отменяем обтекание */ }
  </style>
 </head>
 <body>
  <div class="layout">
   <div class="col1">Кумкват</div>
   <div class="col2">
    Небольшой экзотический фрукт оранжевого или оранжево-жёлтого цвета, 
    по виду напоминающий мелкий апельсин.
   </div><div class="clear"></div>
  </div>
 </body>
</html>

CSS

d