JSFiddle - React, Tailwind, and code Playground

by Derek Wood

HTML

<parent-element> <!-- custom component -->
  <info>one side</info>

  <actions>
    <a href="">other side</a>
  </actions>
</parent-element>



<parent-element>
  <actions>Align center</actions>
  
  <info>Flipped</info>
</parent-element>



<parent-element class='something'>
  <info>
    <h3>Something here</h3>
    <p>Still center with more info</p>
  </info>

  <actions>other side</actions>
</parent-element>



<parent-element class='status-area'>
  <info>
    <h3>Something here</h3>
    <p>aligned to the top</p>
  </info>

  <actions>Status thing</actions>
</parent-element>




<!-- the original question is here -->
<!-- https://www.quora.com/Should-I-skip-learning-floats-and-learn-flex-box-and-grid-in-CSS-Is-floating-out-of-date/answer/Derek-Thomas-Wood -->
<section class='section-with-float-example'>
  
  <img src="https://placehold.it/120">
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora molestiae voluptates culpa nostrum beatae, perspiciatis aperiam voluptas. Velit rem voluptas reiciendis inventore? Nostrum sit vel rerum, laudantium dolore, quibusdam fugiat.</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora molestiae voluptates culpa nostrum beatae, perspiciatis aperiam voluptas. Velit rem voluptas reiciendis inventore? Nostrum sit vel rerum, laudantium dolore, quibusdam fugiat.</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora molestiae voluptates culpa nostrum beatae, perspiciatis aperiam voluptas. Velit rem voluptas reiciendis inventore? Nostrum sit vel rerum, laudantium dolore, quibusdam fugiat.</p>
  
</section>

CSS

/* NOTE */
/* custom elements are display: inline by default */
/* and that's no good for this type of thing */
/* so, make them block or flex etc. */

parent-element {
  display: flex;
  flex-direction: row;
  justify-content: space-between; /* maybe flex-start */
  align-items: center; /* maybe flex-start */
  flex-wrap: wrap;
  padding: 10px;
  border: 2px solid orange;
}

parent-element info {
  display: block;
  padding: 10px;
  border: 2px solid lightgreen;
}

parent-element actions {
  display: block;
  padding: 10px;
  border: 2px solid pink;
}

parent-element.status-area {
  align-items: flex-start;
}

.section-with-float-example {
  margin-top: 40px;
}

.section-with-float-example img {
  float: left; /* you probably will never use this */
  margin-right: 10px;
}