JSFiddle - React, Tailwind, and code Playground

by Derek Wood

HTML

<section class='thing inline-block-thing'>
  <h1>inline-block</h1>

  <div class='side left'>
    <h2>Left</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio neque ad expedita blanditiis, voluptas magni velit a, consequatur.</p>
  </div>
  
  <div class='side right'>
    <h2>Right</h2>
    <ul>
      <li>...</li>
      <li>...</li>
    </ul>
  </div>
</section>



<section class='thing float-thing'>
  <h1>float</h1>

  <div class='side left'>
    <h2>Left</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio neque ad expedita blanditiis, voluptas magni velit a, consequatur.</p>
  </div>
  
  <div class='side right'>
    <h2>Right</h2>
    <ul>
      <li>...</li>
      <li>...</li>
    </ul>
  </div>
</section>



<section class='thing flex-thing'>  
  <div class='side left'>
    <h2>Left(flex)</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio neque ad expedita blanditiis, voluptas magni velit a, consequatur.</p>
  </div>
  
  <div class='side right'>
    <h2>Right(flex)</h2>
    <ul>
      <li>...</li>
      <li>...</li>
    </ul>
  </div>
</section>

CSS

* {
  box-sizing: border-box;
} /* https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */

.side {
  border: 1px solid blue;
}

.thing {
  border: 1px solid red;
  max-width: 600px;
}


/* inline-block */
.inline-block-thing .side {
  display: inline-block;
  width: 49%;
  vertical-align: top;
}

/* float */
.float-thing {
  overflow: hidden; /* temp clearfix */
  /* http://stackoverflow.com/questions/8554043/what-is-a-clearfix */
}
.float-thing .side {
  width: 50%;
  float: left;
}

/* flex-thing */
.flex-thing {
  display: flex;
}
.flex-thing .side {
  flex-basis: 50%;
}
/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */





















section {
  margin-bottom: 3rem;
}