JSFiddle - React, Tailwind, and code Playground

by juErik

HTML

<h1>Herhaling: 3 kolommen, floaten en clearen </h1>

<div class="rechterkolom">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tortor mauris, pellentesque id lorem eu, pulvinar gravida diam. Nunc maximus ligula sit amet felis lobortis cursus. Morbi ac convallis magna, a lobortis sem. Suspendisse potenti. Sed tellus massa, porttitor non pretium quis, viverra sit amet odio. Morbi non sollicitudin lorem, non faucibus diam. Nunc sodales odio et auctor rutrum. Quisque at elit mauris. Morbi quis velit vel nulla cursus laoreet quis eget mi. Donec faucibus leo ac aliquet egestas. Duis pellentesque, turpis a dapibus efficitur, odio libero condimentum purus, quis laoreet ex orci faucibus ante.</p>
</div>

<div class="middenkolom">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tortor mauris, pellentesque id lorem eu, pulvinar gravida diam. Nunc maximus ligula sit amet felis lobortis cursus. Morbi ac convallis magna, a lobortis sem. Suspendisse potenti. Sed tellus massa, porttitor non pretium quis, viverra sit amet odio. Morbi non sollicitudin lorem, non faucibus diam. Nunc sodales odio et auctor rutrum. Quisque at elit mauris. Morbi quis velit vel nulla cursus laoreet quis eget mi. Donec faucibus leo ac aliquet egestas. Duis pellentesque, turpis a dapibus efficitur, odio libero condimentum purus, quis laoreet ex orci faucibus ante. Integer dolor turpis, molestie id tortor quis, pulvinar ullamcorper lacus.</p>
</div>

<div class="linkerkolom">
  <p>Duis bibendum iaculis purus non ornare. Nunc bibendum tellus placerat neque ornare volutpat sit amet vel dolor. Sed euismod venenatis lectus vel imperdiet. Integer posuere risus eget dapibus sagittis. Etiam enim ligula, consectetur a maximus nec, accumsan et eros. Mauris sit amet velit in dui iaculis ultricies. Praesent mattis venenatis magna, facilisis posuere tellus interdum id. Aenean at odio ornare, varius elit a, rutrum purus.</p>
</div>

<div class="footer">
  <p>Aliquam eget...

CSS

body {
  width: 946px;
  margin: 50px auto;
  font-family: helvetica;
  font-size: 90%;
  line-height: 1.35em;
}

.linkerkolom, .middenkolom, .rechterkolom, .footer {
  border: 1px solid black;
  padding: 10px;
  
}

.linkerkolom {
  width: 280px;
 
}

.middenkolom {
  width: 280px;
  float: right;
  margin-bottom: 20px;
}

.rechterkolom {
  width: 280px;
  float: right;
  margin-bottom: 20px;
  margin-left: 20px;
}

.footer {
  clear: both;
}

h1 {
   font-size: 1.8em;
   margin-bottom: 1em; 
   font-weight: bold;
}