JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<div class="wrapper clearfix">
    <div class="box"></div>
    <p>The box fits nicely inside</p>
</div>

<div class="wrapper">
    <div class="box"></div>
    <p>The floated box overflows the wrapper</p>
</div>

<button class="inject">Just a plain ol' button</button>

CSS

.wrapper {
    border: 1px solid green;
    padding: 10px;
    margin: 10px;
    background-color: white;
}

.box {
    width: 100px;
    height: 100px;
    margin: 5px;
    background-color: red;
    float:left;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.inject::after {
    content: " :)";
}