JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<div class="richtig">
  <div id="div-1">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </div>
  <div id="div-2">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </div>
  <div id="div-3">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </div>
</div>

<div class="falsch">

  <h1>
    Falsch:
  </h1>
  <div id="div-1">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </div>
  <div id="div-2">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </div>
  <div id="div-3">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

.richtig {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
}

.richtig>div {
  flex: 33%;
  background: lightgrey;
  margin: 3px;
}

.richtig>#div-1 {
  text-align: left;
}

.richtig>#div-2 {
  text-align: center;
}

.richtig>#div-3 {
  text-align: right;
}

/*Falsch*/

.falsch {
  display: block;
}

.falsch>div {
  background: lightgrey;
  margin: 3px;
  width: 250px;
}

.falsch>#div-1 {
  text-align: left;
  position: absolute;
  top: 175px;
  left: 5px;
}

.falsch>#div-2 {
  text-align: center;
  position: absolute;
  top: 175px;
  left: 262px;
}

.falsch>#div-3 {
  text-align: right;
  position: absolute;
  top: 175px;
  left: 519px;
}

h1 {
  top: 130px;
  position: absolute;
}