JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
 <HTML>
 <HEAD>
 <TITLE>Hjemmeside for og af Roar Pedersen</TITLE>
 <LINK rel=stylesheet type=text/css href="stylesheet/localStyle2.css">
 </HEAD>
 
 <BODY>
 
 <div class="A cf">
     <div class="B">
         <h1>B</h1>
     </div>
 
     <div class="C">
         <div class="img"><h1>C</h1></div>
     </div>
 </div>
 
 <div class='vBar'></div>
 
 <div class='D cf'>
     <div class='E'><span class='G'>E: ATP Koncernen</span><span class='H'>2001-01-01 : 2005-01-03</span></div>
     <div class='F'>F: Danmarks største pensions- og sikringsselskab løser opgaver for næsten alle borgere og virksomheder i Danmark. ATP rangerer blandt Europas største pensionsvirksomheder</div>
 </div>
 
 <div class='D cf'> 
     <div class='E'><span class='G'>E: IBM</span><span class='H'>2006-01-02 : 2009-12-31</span></div>
     <div class='F'>F: IBM Danmark ApS er landets førende virksomhed inden for informationsteknologiske produkter, løsninger og serviceydelser. De primære forretningsområder ligger inden for netværksløsninger, systemintegration, service- og konsulentvirksomhed.</div>
 </div>
 
 <div class='D cf'> 
     <div class='E'><span class='G'>E: Tryg</span><span     class='H'>2010-01-01&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div>
     <div class='F'>F: Tryg er det næststørste skadeforsikringsselskab i Norden. Tryg er et kendt brand hvis historie strækker sig tilbage til 1731.</div>
 </div> 
 
 </BODY>

CSS

body {
 background-color: #ffffff;
 font-family:"Times New Roman";
 font-size: 15px;
 }
 
 h1 {
 color: green;
 }
 
 span, div {
 border: solid black 1px;
 }
 
 div.vBar {
 clear: both; 
 width: 100%;
 border-top: solid blue 5px;
 }
 
 #vBar {
 border-top: solid blue 5px;
 }
 
 
 div.img {
 float: right;
 }
 
 
 div.D {
 padding: 10px 10px 0px 0px; /* top right bottom left */ 
 }
 
 div.A, div.D {
 margin: 0 auto;           
 clear: both; 
 width: 980px;
 border: solid red 1px;
 }
 
 div.B, div.E {
 float: left;
 width: 29%;
 }
 
 div.F {
 padding: 10px 0px 0px 10px; /* top right bottom left */
 }
 
 div.C, div.F {
 float: right;
 width: 69%;
 border-left: solid blue 1px;
 }
 
 span.G {
 float: left;
 width: 40%;
 }
 
 span.H {
 float: right;
 width: 58%;
 }


/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}


/* apply a natural box layout model to all elements */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }