JSFiddle - React, Tailwind, and code Playground

by Arun Tummala

HTML

<span class="">
  <span>Hello is this diaplying block?</span>
<div class="displayInline">
  inside DIV
</div>
</span>

<div class="parent">
  <div class="child">
    Child 1
  </div>
  <div class="childGreen">
    Child 2
  </div>
</div>

CSS

.flotLeft {
  float: left;
}

.displayInline {
  display: block;
}

/*margin collapsing*/

.parent {
  background-color: yellow;
}

.child {
  background-color: blue;
  margin-top: 5px;
  margin-bottom: 5px;
  clear: both;
}

/*See where the size of childgreen extends with margin but parent size is never increased*/

.childGreen {
  background-color: green;
  margin-bottom: 20px;
  margin-top: 1px;
}