JSFiddle - React, Tailwind, and code Playground

by xToxic

HTML

<!-- Opgelost door het gebruik van een container -->

<section class="holder" id="group">
  <img class="holder_image" src="https://via.placeholder.com/300x300" alt="Afbeelding" title="De titel." />
  <div class="holder_text-holder">
    <h3 class="holder_text-holder_title" title="De titel.">De titel.</h3>
    <p class="holder_text-holder_text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam commodo elit eu lectus laoreet, ac mollis ex aliquet. Maecenas commodo aliquet suscipit. Duis hendrerit venenatis lacus id scelerisque. Ut laoreet nibh mollis neque lacinia vehicula. Aliquam ac tincidunt massa. Sed vitae viverra urna.
    </p>
  </div>
</section>
<section class="holder" id="group">
  <img class="holder_image" src="https://via.placeholder.com/300x300" alt="Afbeelding" title="De titel." />
  <div class="holder_text-holder">
    <h3 class="holder_text-holder_title" title="De titel.">De titel.</h3>
    <p class="holder_text-holder_text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam commodo elit eu lectus laoreet, ac mollis ex aliquet. Maecenas commodo aliquet suscipit. Duis hendrerit venenatis lacus id scelerisque. Ut laoreet nibh mollis neque lacinia vehicula. Aliquam ac tincidunt massa. Sed vitae viverra urna.
    </p>
  </div>
</section>

<!-- Opgelost door het gebruik van 'clear: left' -->


<section class="holder" id="with-clear">
  <img class="holder_image" src="https://via.placeholder.com/300x300" alt="Afbeelding" title="De titel." />
  <div class="holder_text-holder">
    <h3 class="holder_text-holder_title" title="De titel.">De titel.</h3>
    <p class="holder_text-holder_text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam commodo elit eu lectus laoreet, ac mollis ex aliquet. Maecenas commodo aliquet suscipit. Duis hendrerit venenatis lacus id scelerisque. Ut laoreet nibh mollis neque lacinia vehicula. Aliquam ac tincidunt massa. Sed vitae viverra urna.
    </p>
  </div>
  <img...

SCSS

@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700');

$color_firstAccent:                             #1976D2;

html {
  padding: 25px;
}

html, body {
  font-size: 18px;
  font-weight: 400;
  font-family: "Noto Sans", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: $color_firstAccent;
  margin: 0;
  margin-bottom: 25px;
  padding: 0;
}

strong {
  font-weigth: 700;
}

p {
  margin-top: 0;
  margin-bottom: 10px;
}

a {
  color: $color_firstAccent;
  &:hover {
    color: darken($color_firstAccent, 25%);
  }
}

.holder {

  &_image {
    display: block;
    float: left;
    padding-right: 25px;
    box-sizing: border-box;
    margin-bottom: 50px;
  }

  &_text-holder {
    float: left;
    width: calc(100% - 325px);
    margin-bottom: 40px;

    &_title {

    }
    &_text {

    }
  }

  &#group {
    &:before, 
    &:after {
      display: table;
      content: " ";
    }
    &:after {
      clear: both;
    }
  }

  &#with-clear {
    .holder_image {
      clear: left;
    }
  }

}