JSFiddle - React, Tailwind, and code Playground

by moob

HTML

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

CSS

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

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

#midbox {
  display: flex;
  position: absolute;

  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 {
  display: block;
  position: relative;

  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 {
  display: block;
  position: relative;

  height: 100%;
  width: 35%;

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