Fixing HTML form in CSS - html

Question

Is there a way to fix a form in such a way that the form does not fluctuate?
The desired shape of the form is:
The actual shape of the form fluctuates:
Here is the .css:
form {
background-color: white;
padding: 20px;
border: 1px solid black;
position: fixed;
top: 80%;
left: 50%;
transform: translate(-50%, -80%);
float: left;
}
#textarea-container {
float:right;
}
#inputs-container {
float: left;
width: 145px;
}
input[type=text] {
width: 100%;
}
input, textarea {
display: block;
}
textarea {
height: 100px;
width: 140px;
}
If you look at the .css, the form property for position is marked as fixed but the form still fluctuates.
Here is the HTML
<form name="contactform" method="post" action="mail.php">
<div id="textarea-container">
<textarea name="questions" placeholder="Questions" maxlength="1000" cols="25" rows="6"></textarea>
</div>
<div id="inputs-container">
<input type="text" name="first_name" placeholder="First Name">
<input type="text" name="last_name" placeholder="Last Name">
<input type="text" name="email" placeholder="Email">
<input type="text" name="telephone" placeholder="Telephone">
</div >
<input id="submit" type="submit" value="Submit">
</form>

Answer 1

Since you have floats on the two divs inside the form, you'll need to put a wrapper around them and set a fixed width, ie:
<form name="contactform" method="post" action="mail.php">
<div id="wrapper">
<div id="textarea-container">
<textarea name="questions" placeholder="Questions" maxlength="1000" cols="25" rows="6"></textarea>
</div>
<div id="inputs-container">
<input type="text" name="first_name" placeholder="First Name">
<input type="text" name="last_name" placeholder="Last Name">
<input type="text" name="email" placeholder="Email">
<input type="text" name="telephone" placeholder="Telephone">
</div >
</div>
<input id="submit" type="submit" value="Submit">
</form>
and
#wrapper{
width:250px;
}