JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/yyx990803/vue/master/dist/vue.js"></script>
<div id="app">
  <div class="wrapper">
    <div class="left">
      <div class="content">
        Column 1
      </div>
    </div>
    <div class="right">
      <div class="content">
        Column 2
      </div>
    </div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

body {
  color: #666;
}

.wrapper {
  display: table;
  height: 300px;
  width: 100%;
}

.left,
.right {
  overflow: hidden;
  display: table-cell;
  padding: 20px;
  vertical-align: top;
}

.left {
  width: 150px;
  background-color: #99f0bb;
  resize: horizontal;
}

.right {
  background-color: #99bbf0;
}

.content {
  padding: 10px;
  height: 100%;
  width: 100%;
  border: 1px solid #666;
}

.handler {
  display: table-cell;
  background-color: #f58833;
  height: 100%;
  width: 4px;
  cursor: col-resize;
}