JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

  <div class="column">
  <p>khoaaaaaaaaaaaaaa</p>
  </div>

  <div class="column">
    <h1>Hello Kitty!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
  </div>
   <div class="column">
  <p>khoaaaaaaaaaaaaaa</p>
  </div>

  <div class="column">
    <h1>Hello Kitty!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cuharum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>

  </div>
   <div class="column">
  <p>khoaaaaaaaaaaaaaa</p>
  </div>

  <div class="column">
    <h1>Hello Kitty!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
    
  </div>
  
  

</div>

CSS

.container {
  float: left;
  width: 100%;
  background-color: black;
  position: relative;
  left: 0;
  margin-bottom:20px;
}
.column:nth-child(odd) {
  float: left;
  width: 30%;
  height: 100%;
  position: absolute;
  background: green;
  margin-bottom:10px;
}

.column:nth-child(even) {
  float: right;
  width: 70%;
  position: relative;
  padding: 0;
  margin: 0;
  background: red; 
  margin-bottom:10px;
}