JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<div class="container">
  <div class="floated">
    Floated div Lorem ipsum dolor sit amet.
  </div>
  <div class="p">
    Lorem ipsum dolor sit amet, consectet
  </div>
</div>

<div class="abs-container">
  <div class="abs">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At omnis distinctio placeat aliquid dicta deleniti ipsam eaque explicabo earum, nesciunt accusamus voluptatem porro. Corrupti eum, minus ea, illum mollitia ut aliquam minima! Officiis natus, ex alias aperiam atque, est quo deleniti odio pariatur minima perspiciatis provident necessitatibus repudiandae nihil iste.</div>
</div>

CSS

.container {
  width: 350px;
  border: 2px dashed;
  margin: 50px auto;
  background-color: #333;
  color: #fff;
  display: flow-root;
}
.floated {
  background-color: red;
  opacity: .3;
  padding: 10px;
  padding: 30px;
  float: left;
  max-width: 30%;
  border: 1px solid #fff;
}

.abs-container {
  border: 2px dashed;
  background-color: goldenrod;
  padding: 5px;
  position: relative;
  overflow: auto;
  min-height: 400px;
}
.abs {
  position: absolute;
  max-width: 250px;
  border: 2px solid;
}