JSFiddle - React, Tailwind, and code Playground

Flexbox Layout for Image Comparison Tool

by skibulk

HTML

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div id="flexCanvas" class="flexChild rowParent">
  <div id="colLeft" class="flexChild colParent">
    <div id="row1" class="flexChild">Row 1</div>
    <div id="row2" class="flexChild">Row 2</div>
    <div id="row3" class="flexChild">Row 3</div>
    <div id="row4" class="flexChild">Row 4</div>
    <div id="row5" class="flexChild">Row 5</div>
  </div>
  <div id="colRight" class="flexChild col">Row 1 Col 2</div>
</div>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  border: 0;
  padding: 0;
}

/* FLEXBOX http://maxsteenbergen.com/fibonacci/ */

html, body, #flexCanvas {
  width: 100%;
  height: 100%;
  margin: 0;
}

.rowParent,
.colParent {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: stretch;
}

.colParent {
  flex-direction: column;
}

.flexChild {
  flex: 1;
  align-self: auto;
}

#row1, #row3, #row5 {
  flex: 0 0 auto;
  height: 30px;
}

#colLeft {
  flex: 0 0 auto;
  width: 40%;
}