JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div class="mdiv">
    <span class="VerticalBorder" id="Span1"></span>
    <header class="mheader">
      <span class="HorizontalBorder" id="Span2"></span>
    </header>
  </div>
</body>

CSS

body {
  margin: 0%;
}

div.mdiv {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  margin: 0%;
}

header.mheader {
  position: absolute;
  width: 100%;
  height: 20%;
  /* You can set this to whatever. I will use 20 for easier calculations. You don't need a header. I'm using it to show you the difference. */
  top: 0%;
  left: 0%;
  margin: 0%;
}

span.HorizontalBorder {
  position: absolute;
  width: 100%;
  margin: 0%;
  background-color: #000000;
}

span.VerticalBorder {
  position: absolute;
  height: 100%;
  margin: 0%;
  background-color: #000000;
}

span#Span1 {
  top: 0%;
  left: 0%;
  width: .4%;
}

span#Span2 {
  top: 99%;
  left: 0%;
  height: 1%;
}

JavaScript

window.addEventListener("load", Loaded);

function Loaded() {
  window.addEventListener("resize", Resized);

  function Resized() {
    var WindowWidth = window.innerWidth;
    var WindowHeight = window.innerHeight;
    var Span1 = document.getElementById("Span1");
    var Span2 = document.getElementById("Span2");
    if (WindowWidth <= 800) {
      Span1.style.width = .4;
    }
    if (WindowHeight <= 600) {
      Span2.style.height = 1;
    }
  }
}