JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.2.3/css/foundation.min.css">
<script src="//cdn.jsdelivr.net/zepto/1.0rc1/zepto.min.js"></script>
<script src="https://raw.github.com/zurb/foundation/master/js/foundation/foundation.js"></script>
<script src="https://raw.github.com/zurb/foundation/master/js/foundation/foundation.topbar.js"></script>
<body>
    <div class='row'>
      <div class='col1 columns'>
          <ul class='sticky'>
              <li>Item 1</li>
              <li>Item 2</li>
              <li>Item 3</li>
              <li>Item 4</li>
              <li>Item 5</li>
          </ul>
      </div>
      <div class='col2 columns'>
          <div>Some text 2</div>
      </div>
      <div class='col3 columns'>
          <div class='row'>
              <div class='small-6 columns'>Left</div>
              <div class='small-6 columns'>Right</div>
          </div>
      </div>
    </div>
  </body>

CSS

body {
    position: relative;
}

.sticky{
    position:fixed;
    z-index:999;
}

.col1 {
    position: absolute;
    left: 0;
    background: yellow;
    width: 150px;
}

.col2 {
    position: absolute;
    left: 150px;
    width: 150px;
    top: 0;
    bottom: 0;    
}

.col2 div {
    background: red;
    width: 300px;
}

.col3 {
    position: absolute;
    left: 300px;
    top: 0;
    right: 0;
    bottom: 0;
    width: auto;
}

.col3 div {
    background: blue;
}