JSFiddle - React, Tailwind, and code Playground

by Johan van de Merwe

HTML

<div class="box">
  <div class="box-content">

    <div class="box-image">
      <div class="wrap">
        <img src="https://pbs.twimg.com/media/DQckroiVwAAPw8Y.jpg" />
      </div>
    </div>

    <div class="box-text">
      <div class="wrap">
        Hier komt de tekst en wel een hele lange tekst, eigenlijk te lange tekst. Well this could be even longer than the Dutch text if it would be in English. Und es könnte auch noch etwas an Deutschen Text beinhalten, aber das würde schon ein sehr lange Text werden. Dus houden we het maar gewoon bij Nederlandse tekst.
      </div>
    </div>

  </div>
  <div class="box-footer">
    <div class="wrap">
      hier komt de bijlage
    </div>
  </div>
</div>

CSS

.box {
  width: 600px;
  border: 5px solid #a1a1a1;
  border-radius: 10px;
  background: #fff;
  position: relative;
}

.box-content {
  padding: 10px;
}

.box-image {
  width: 30%;
  display: inline-block;
}

.box-image .wrap {
  padding-top: 10px;
  width: 100%;
}

.box-image img {
  width: 100%;
}

.box-text {
  display: inline-block;
  text-align: justify;
  font-size: 20px;
  vertical-align: top;
  width: 68%;
}

.box-text .wrap {
  padding: 5px;
}

.box-footer {
  padding: 10px;
  border-top: 4px solid #a1a1a1;
  text-align: center;
  background: #f1f1f1;
}