JSFiddle - React, Tailwind, and code Playground

by mble

HTML

<div id="left">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</div>
<div id="right">
  right
  <div id="centrethis">
    centre this
  </div>
</div>

CSS

#left {
  float: left;
  width: 200px;
  height: 200px;
  background-color: cyan;
  z-index: 10;
  position: sticky;
}

#right {
  width: calc(100% - 200px);
  height: 200px;
  background-color: green;
  border: 1px solid red;
  position: relative;
  left: 200px;
}

#centrethis {
  width: 400px;
  height: 100px;
  background-color: yellow;
  margin-left: auto;
  margin-right: auto;
}