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%;
     overflow:hidden;
}

.get2:nth-child(2n){
margin-left:-4px;
}
.get2{
  vertical-align:top;
		display:inline-block;
		height:auto;
		width:50%;
		padding-bottom: 99999px;
		margin-bottom: -99999px;
}



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