JSFiddle - React, Tailwind, and code Playground

HTML

<div id="midbox">
  <div id="preview">
    <p>Preview</p>
  </div>
  <div id="cont">
    <p>Why does this apper under the box and not on the left?</p>
  </div>
</div>

CSS

html,
body {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  background-color: #f0f0f0;
}

#midbox {
  display: flex;
	position: relative;

  width: 90%;
  height: 85%;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);

  background-color: #7d7c7d;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}

#preview {

  height: 100%;
  width: 35%;

  background-color: #525052;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}

#preview p {
  margin: 0;
  padding-top: 3%;
  font-size: 2em;
  opacity: 0.7;

  color: #f0f0f0;
  font-family: 'Lato', sans-serif;
  text-align: center;
}

#cont {
  position: relative;

  height: 100%;
  width: 35%;

  background-color: green;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}