JSFiddle - React, Tailwind, and code Playground

by Michael Coomey

HTML

<h2>Flexbox example</h2>
<div class="flex-container">
  <div class="flex-item">1 
    <p>Long block of text - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, incidunt nihil ipsam, fugiat veniam ratione aperiam maxime porro autem.</p>
  </div>
  <div class="flex-item">2
    <p>Short block of text - Doloribus obcaecati similique at praesentium.</p>    
  </div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
</div>

CSS

.flex-container {
  margin-bottom: 100px;
  display: flex;
  /* flex-direction: row-reverse; */
  /* justify-content: flex-end; */
}
.flex-item {
  border: 1px solid blue;
  padding: 10px;
  width: 20%;
}



/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}