JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container_options">
<fieldset class="main_options_plug1" >
<legend>Konfiguration des offenen Endes</legend>
<div id="main_dropdown_options_plug1"></div>
</fieldset>
<fieldset class="main_options_cable">
<legend>Verfügbare Optionen für Ihr Kabel</legend>
<div id="main_dropdown_options_cable">
<p>Bestimmen Sie die Kabellänge: </p>
<select id="options_length" onChange="checkForSpecialLength();"></select>
<div id="specialLength" style="display:none;">
<p> Geben Sie die Sonderlänge in cm ein: </p>
<!--<input id="specialLengthInput" type="text" name="specialLengthInput" value="" />-->
<input type="range" id="specialLengthInput" min="0" max="1000" value="0" step="10" onclick="setSpecialLength(this.value);" onmousemove="setSpecialLength(this.value);"/>
<span id="specialLengthRange">0</span>
</div>
<p> Bestimmen Sie die Farbe des Kabels: </p>
<select id="options_colour">
</select>
<p> Bestimmen Sie die Verpackung: </p>
<select id="options_packaging">
</select>
<input type="submit" value="Seriennummer" onClick="getArticleNumber();"/>
</div>
</fieldset>
<fieldset class="main_options_plug2" >
<legend>Konfiguration des offenen Endes</legend>
<div id="main_dropdown_options_plug2"></div>
</fieldset>
</div>
CSS
div.container_options {
margin: 15px;
clear: both;
width: 980px;
}
fieldset.main_options_plug1{
width: 300px;
border: 1px solid black;
border-radius: 5px;
margin-left: 0;
margin-right: auto;
/* float: left; */
margin-top: 10px;
}
.main_options_plug1 legend {
font-weight: bold;
}
.main_options_plug2{
width: 300px;
border: 1px solid black;
border-radius: 5px;
margin-left: auto;
margin-right: 0;
/* float: right;*/
margin-top: 10px;
}
.main_options_plug2 legend {
font-weight: bold;
}
.main_options_cable {
width: 300px;
border: 1px solid black;
border-radius: 5px;
margin: auto;
/* float: right;
float: left;*/
margin-top: 10px;
}