JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="floating-column">
      <div id="extra">
        <div class="floating">first float</div>
        <div class="floating">another float</div>

        <p class="par">Cras nibh erat, tempor non sagittis ac, vulputate ac lectus. Praesent sed fermentum eros. Mauris sodales suscipit diam, a congue dui commodo ac. Sed convallis rutrum ligula, vitae sollicitudin nisl porttitor nec. Mauris tempor fringilla imperdiet. Pellentesque interdum, tellus nec venenatis venenatis, nisi nulla ultricies leo, tincidunt venenatis risus nisl ac dolor. Donec ante leo, elementum et faucibus tincidunt, dignissim lacinia libero. Suspendisse pharetra in augue in sodales. Etiam luctus dui blandit nisi dictum pretium.</p>
      </div>
    </div>
  </div>

CSS

html, body, div, p {
  border:0;
  margin:0;
  padding:0;
}

.container {
  width:960px;
  margin:0 auto;
  background-color: #ddd;
}
.container:after {
  content:"";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}
.floating-column {
   
    border: 1px dashed green;
}

.floating {
  float: left;
  width:100%;
  border: 1px dotted black;
}