JSFiddle - React, Tailwind, and code Playground

by vaibhav saxena

HTML

<html>

 
<body>
<div class='parentContainer'>
  <div class='child1'>child1</div>

  <div class='child1'>child1</div>

  <div class='child2'>child2</div>

  <div class='child3'>child3</div>
</div>
</body>

</html>

CSS

.html,.body{
  font-size:80px;
}

.parentContainer{
  background-color:#000;
  width: 500px;
  border:1px dotted #00FF00;
  overflow: hidden;
  box-sizing:border-box;
}

.child1, .child2, .child3{
  display: inline-block;
  height: 100px;
 float: left;
  border: 3px solid #2a2a2a;
  box-sizing:border-box;
  text-align: center;
  line-height: 100px;
}
.child1{
  background: red;
  border-right: 0.0625rem solid #000;
  width: calc( 25% - 0px);
  
}

.child2{
  background:pink;
   border-right: 1px solid #000;
    width: calc( 25% - 0px);   
   display:block;
 
}
.child3{
  background: yellow;  
  width: calc( 25% - 0px);  
}

@media only screen and (max-width:1024px){
  .child1, .child2, .child3{
    background: #00F0F0;
    width:50%;
  }
}

@media only screen and (max-width: 768px){
  .child1, .child2, .child3{
    background: green;
    width:100%;
  }
}