в этом проекте (только javascript (jquery), css и HTML5) при попытке сохранить входные данные в правой части восприимчивого описания, например, на следующем изображении показано 
Но вместо этого, когда я изменяю размер, поля ввода сворачиваются в левой части описания, например, на фото-шоу. 
Поэтому мой вопрос заключается в том, как я могу решить эту проблему, сохраняя мои входы всегда на правой стороне, даже когда я изменяю размер. я вставлю код, связанный с этими div
.leftPane {
position: relative;
float: left;
width: 100%;
padding-left: 100px;
padding-top: 50px;
resize: both;
}
.rightPane {
position: relative;
float: left;
width: 100%;
padding-left: 100px;
padding-top: 50px;
resize: both;
}
@media (max-height: 860px) {
.leftPane {
position: relative;
float: left;
width: 50%;
padding: 0;
}
.rightPane {
position: relative;
float: left;
width: 50%;
padding: 0;
}
}
#steps {
width: 600px;
/*height:320px;*/
}
.step {
float: left;
width: 600px;
/*height:320px;*/
height: inherit;
overflow-y: auto;
}
<div id="content">
<h1 id="contentTitle">ETAP Ley configurator</h1>
<div id="wrapper">
<div id="steps" class="steps">
<form id="formElem" name="formElem" action="" method="post">
<!-- Project Definitions -->
<fieldset class="step">
<legend id="stepTitle_0">Project Definition</legend>
<div id="stepDesc_0" class="txtbox">
Create light lines with Ley, the modular lighting system. Draw your own personalized configuration here. Choose short or long lines, straight or angled, with or without uplight, suspended, ceiling mounted or wall mounted… The possibilities are endless!
<br><br>
<!-- Please fill in the projet data -->
Please fill in the project information
</div>
<!-- Left Pane -->
<div class="rightPane" id="Pane">
<p style="padding:5px 0"><label id="projLabel">Project</label></p>
<p>
<label for="pname" id="pname_lbl">Name</label>
<input id="pname" name="pname" type="text" AUTOCOMPLETE=OFF />
</p>
<p>
<label for="proom" id="proom_lbl">Room</label>
<input id="proom" name="proom" type="text" placeholder="e.g. Main Hall" AUTOCOMPLETE=OFF />
</p>
<p>
<label for="paddr" id="paddr_lbl">Address</label>
<input id="paddr" name="paddr" type="text" AUTOCOMPLETE=OFF />
</p>
<p>
<label for="date" id="date_lbl">Date</label>
<input id="date" name="date" type="text" disabled/>
</p>
</div>
<!-- Right Pane -->
<div class="leftPane" id="Pane">
<p><label id="contactLabel">Contact</label></p>
<p>
<label for="cname" id="cname_lbl">Name</label>
<input id="cname" name="cname" type="text" AUTOCOMPLETE=OFF maxlength="11" />
</p>
<p>
<label for="email" id="email_lbl">E-mail</label>
<input id="email" class="email" name="email" placeholder="e.g. mail@mail.com" AUTOCOMPLETE=OFF onBlur="checkEmail(this.value)" />
</p>
<p>
<label for="phone" id="phone_lbl">Phone</label>
<input id="phone" name="phone" placeholder="e.g. +3233100211" type="number" onkeydown="return event.keyCode !== 69" AUTOCOMPLETE=OFF/>
</p>
<p>
<label for="caddr" id="caddr_lbl">Address</label>
<input id="caddr" name="caddr" type="text" AUTOCOMPLETE=OFF />
</p>
<p>
<label for="country" id="country_lbl">Country</label>
<select id="country" name="country">
<option value='blank' disabled selected value> </option>
<option value='be' id="country_op0">Belgium</option>
<option value='lu' id="country_op1">Luxembourg</option>
<option value='fr' id="country_op2">France</option>
<option value='de' id="country_op3">Germany</option>
<option value='nl' id="country_op4">The Netherlands</option>
<option value='pt' id="country_op5">Portugal</option>
<option value='es' id="country_op6">Spain</option>
<option value='se' id="country_op7">Sweden</option>
<option value='other' id="country_op8">Other</option>
</select>
</p>
</div>