JSFiddle - React, Tailwind, and code Playground

HTML

<body>



  <nav>
    <h1>IP Address Tracker</h1>

    <form>
      <div class="input">
        <input type="text" placeholder="Search for any IP address or domain" />
        <input type="submit" value="" />
      </div>
    </form>

    <div class="output">
      <div>
        <span class="title">IP Address</span>
        <span class="content" name="ip">placeholder</span>
      </div>

      <div>
        <span class="title">Location</span>
        <span class="content" name="location">placeholder placeholder</span>
      </div>

      <div>
        <span class="title">Timezone</span>
        <span class="content" name="timezone">placeholder</span>
      </div>

      <div>
        <span class="title">ISP</span>
        <span class="content" name="isp">placeholder placeholder</span>
      </div>
    </div>
  </nav>

  <main>
    <div id="leaflet"></div>
  </main>


</body>

SCSS

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap');

body {
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body,
input,
button {
  font-family: 'Rubik', sans-serif;
}

main {
  background: gray;
  flex-grow: 1;
}

nav {
  background: url('https://png.pngtree.com/thumb_back/fh260/background/20190828/pngtree-dark-vector-abstract-background-image_302715.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 2rem 0 3rem;
  color: white;
  text-align: center;
  position: relative;
  will-change: padding-bottom;
  transition: 100ms padding-bottom;

  h1 {
    font-weight: normal;
    font-size: 2rem;
    margin-top: 0;
  }
}

form {
  margin-bottom: 1.4rem;

  .input {
    display: flex;
    justify-content: center;
    height: 2.4rem;

    input {
      border: none;
      padding: 0.3rem 0;
    }

    input[type='text'] {
      width: 65%;
      max-width: 820px;
      padding-left: 1rem;
      box-sizing: border-box;
      border-radius: 10px 0 0 10px;
    }

    input[type='submit'] {
      width: 2.4rem;
      background: black url('./images/icon-arrow.svg');
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 0 10px 10px 0;

      &:hover {
        background-color: hsl(0, 0%, 59%);
        cursor: pointer;
      }

      &:disabled {
        background-color: hsl(0, 0%, 59%);
        opacity: 0.7;
      }
    }

    @media (max-width: 480px) {
      width: 90%;
      margin: auto;

      input[type='text'] {
        flex-grow: 1;
      }
    }
  }
}

.output {
  position: absolute;
  z-index: 666;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  display: flex;
  flex-wrap: wrap;
  background: white;
  width: 77%;
  max-width: 960px;
  margin: auto;
  border-radius: 10px;
  justify-content: space-between;

  div {
    padding: 1.7rem;
   ...

JavaScript

const nav = document.querySelector('nav')
const output = document.querySelector('.output')

setPadding()
window.addEventListener('resize', setPadding)

function setPadding() {
  const height = output.getBoundingClientRect().height
  nav.style.paddingBottom = height / 2 + 'px'
}