JSFiddle - React, Tailwind, and code Playground

by Ergün YILDIZ

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<div class="flexbox">
  <div class="col">
    <h3>I am listed first in source order.</h3>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>
  <div class="col">
    <h3>I am listed second.</h3>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
  </div>
  <div class="col">
    <h3>I am listed last in source order. I am listed last in source order.</h3>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>
</div>

CSS

body,html{
  display:flex;
  height:100%;
}
.flexbox {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: visible;
}

.flexbox .col {
  flex: 1;
  border: 1px solid red;
  padding: 5px;
}

h3 {
  border: 1px solid green;
}

p {
  border: 1px solid blue;
}