JSFiddle - React, Tailwind, and code Playground

by Adarsh Gowda

HTML

<div class="parent">
   <div class="first-child">
      <p>Im floated left</p>
   </div>
  <div class="second-child">
      <p>Im floated left</p>
   </div>

</div>

<div class="occupy-spaceleft">
  will occupy the remaning space if the parent div has not cleared the float or else if the float is cleared means . This div will come below the parent div
</div>

<!-- now apply clearfix class to parent -->

<div class="parent clearfix">
   <div class="first-child">
      <p>Im floated left</p>
   </div>
  <div class="second-child">
      <p>Im floated left</p>
   </div>

</div>

<div class="occupy-spaceleft">
  will occupy the remaning space if the parent div has not cleared the float or else if the float is cleared means . This div will come below the parent div
</div>

CSS

.first-child{
    float:left
}
.second-child{
    float:left
}
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
} 
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}