I can't seem to figure out how to stop my html form from splitting apart and shifting down when resizing the page

Question

I'm working on a rails application and I keep having this problem where my html form keeps splitting apart and moving down every time I resize the page. I have tried wrapping it in tags, trying different positions, floats, and displays and nothing seems to work. Currently, this is my code for it. Also, I have some images of the outcome.

How would you go about preventing this from happening? This happens both in a production and development environment, if that changes anything.

html:

<div id="containerc">
  <div id="contcontent">
    <div id="formwrapper">
      <form action="/contacts" method="POST">
        <label for="fullname" class="label" id="fullname">Full Name*</label>
        <input type="text" name="fullname" class="input" id="ifullname" style="width: 48.5vw; height: 2.5vw; font-size: 1.5vw;" />
        <label class="label" id="email" for="email">Email*</label>
        <input id="iemail" type="text" name="email" class="input" style="font-size: 
                              1.5vw; width: 48.5vw; height: 2.5vw;" />
        <label for="company" class="label" id="company">Company</label>
        <input type="text" name="company" class="input" id="icompany" style="width: 
                              48.5vw; height: 2.5vw; font-size: 1.5vw;" />
        <label for="message" class="label" id="message">Message</label>
        <textarea id="imessage" name="message" class="input" style="width: 48.5vw; 
                              height: 8vw; font-size: 1.2vw;"></textarea>
        <input type="submit" id="submit" value="Submit" style="width: 10vw; height: 
                              2vw;" />
      </form>
    </div>
  </div>
</div>

css:

h1#cont {
  text-align: center;
  bottom: 31vw;
  position: absolute;
  font-size: 7vw;
  left: 32.3vw;
  font-family: albaregular;
}

form {
  position: absolute;
  bottom: 55vw;
  white-space: nowrap;
}

label#fullname.label {
  font-family: eb_garamond_sc08_regular;
  font-size: 2vw;
  position: absolute;
  left: 25.4vw;
  bottom: -20vw;
  z-index: 1;
}

label#email.label {
  font-family: eb_garamond_sc08_regular;
  font-size: 2vw;
  position: absolute;
  left: 25.4vw;
  bottom: -26vw;
  z-index: 7;
}

label#company.label {
  font-family: eb_garamond_sc08_regular;
  font-size: 2vw;
  position: absolute;
  left: 25.4vw;
  bottom: -32vw;
  z-index: 3;
}

label#message.label {
  font-family: eb_garamond_sc08_regular;
  font-size: 2vw;
  position: absolute;
  left: 25.4vw;
  bottom: -38vw;
  z-index: 4;
}

input#ifullname.input {
  left: 25.3vw;
  bottom: -23vw;
  position: absolute;
  z-index: 0;
}

input#iemail.input {
  left: 25.3vw;
  bottom: -29vw;
  position: absolute;
  z-index: 0;
}

input#icompany.input {
  left: 25.3vw;
  bottom: -35vw;
  position: absolute;
  z-index: 0;
}

textarea.input {
  left: 25.3vw;
  bottom: -46.5vw;
  position: absolute;
  z-index: 0;
}

input#submit {
  left: 43vw;
  font-size: 1vw;
  position: absolute;
  bottom: -52vw;
  font-family: eb_garamond_sc08_regular;
}

Images:

Fullscreen

Mobile

Answer 1

I've taken your HTML and removed all the positioning and only used a wrapper div centering the entire form with

display: grid;
place-items: center;

and aligned the form elements in a column using

display: flex;
flex-direction: column;

on the form.

:root {
  font-size: 1vw; /* questionable from a design perspective */
}

input,
textarea {
  font-size: inherit;
}

.wrapper {
  display: grid;
  place-items: center;
}

.form {
  display: flex;
  flex-direction: column;
}

.button {
  align-self: center;
}

<div class="wrapper">
  <form class="form" action="/contacts" method="POST">
    <label for="ifullname" class="label" id="fullname">Full Name*</label>
    <input type="text" name="fullname" class="input" id="ifullname"/>
    <label class="label" id="email" for="iemail">Email*</label>
    <input id="iemail" type="text" name="email" class="input"/>
    <label for="icompany" class="label" id="company">Company</label>
    <input type="text" name="company" class="input" id="icompany"/>
    <label class="label" for="imessage" class="label" id="message">Message</label>
    <textarea id="imessage" name="message" class="input"></textarea>
    <input class="button" type="submit" id="submit" value="Submit"/>
  </form>
</div>

As long as your layout stays rather simple, you should use that template as a base and maybe only use some different padding or adjust font size if you prefer so...

Also note that in label's for you need to specify the referred input's id instead of name to work properly.