JSFiddle - React, Tailwind, and code Playground

by Noir Noir

HTML

<div class="block">
  <div class="image"></div>
  <div class="text">
    <p>blabla blab lablabla blabl abl blabla blab lablabla blabl abl blabla blab lablabla blabl abl blabla blab lablabla blabl abl blabla blab lablabla blabl abl blabla blab lablabla blabl abl blabla blab lablabla blabl abl blabla blab lablabla blabl abl blabla blab lablabla blabl abl </p>
  </div>
</div>
<div class="block bottom">
  <div class="image"></div>
  <div class="text">
    <p>blabla blab lablabla blabl abl blabla blab lablabla blabl abl blabla blab lablabla blabl abl blabla blab lablabla blabl abl blabla blab lablabla blabl abl blabla blab lablabla blabl abl blabla blab lablabla blabl abl blabla blab lablabla blabl abl </p>
  </div>
</div>

CSS

.block .image {
  float: right;
  width: 300px;
  height: 200px;
  background: #ccc;
}
.block:nth-child(2n) .image {
  float: left;
}
.block.bottom .text {
  display: inline-block;
  width: 500px;
}