JSFiddle - React, Tailwind, and code Playground

by FreeS

HTML

<div class="parent">
  <div class="child">
   Try to change "height" of parent to max-content instead of 40px -
   the parent's padding will be narrowed by 10px. <br>To sum-up, with max-content parent's height is adjusting to it's children
  </div>
</div>

CSS

.parent{
  height:60px;
  background-color:yellow;
  padding-bottom:30px;
  
}

.child{
  height: 70px;
  background-color:red;
  color:white;
}

body{
  background-color: #4444;
}