JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="row">
  <div class="box">surati</div>
  <div class="box">teqsti</div>
</div>
<div class="row">
  <div class="box">surati</div>
  <div class="box">teqsti</div>
</div>
<div class="row">
  <div class="box">surati</div>
  <div class="box">teqsti</div>
</div>
<div class="row">
  <div class="box">surati</div>
  <div class="box">teqsti</div>
</div>

CSS

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
.row:after {
  content: '';
  display: table;
  clear: both;
}
.row {
  margin-bottom: 20px;
}
div.box {
  width: 50%;
  display: inline-block;
  padding:10px;
  border: 1px solid black;
  float:left;
}
div.row:nth-child(even) div.box{
  float: right;
}