JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="wrap">
  <div class="get2">
       <h1>1</h1>
      abc
  </div>
  <div class="get2">
       <h1>2</h1>
  </div>
  <div class="get2">
       <h1>3</h1>
      d<br>
e
  </div>
  <div class="get2">
      <h1>4</h1>
  </div>
</div>  
</body>

CSS

body{
    background:#000;
    color:#ccc;
    text-align:center;
    margin:10px;
}
.wrap{
    float:left;
    background:#fff;
    width:100%;
    
}
.get2{
    float:left;
    height:auto;
    width:50%;
}



.get2:nth-child(1){ background:red;}
.get2:nth-child(2){ background:green;}
.get2:nth-child(3){ background:yellow;}
.get2:nth-child(4){ background:blue;}