<style> * { box-sizing: border-box; margin: 0; } .form-row { display: flex; } .wrapper { height: 500px; flex-basis: 49%; border: solid black 3px; background-color: lightgrey; padding: 0.5em; border-radius: 3px; } .label-left { flex: 0 0 7.5em; } .label-middle { padding-left: 1em; padding-right: 0.2em; } .input-max { flex-grow: 1; } textarea{ width:100%; height:100%; } div#personal-detail { height: 100%; display:flex; flex-direction:column; } .row1{ height:100%; } </style> <form id="form" autocomplete="off"> <div class="wrapper"> <div id="personal-detail"> <div class="caption">Persönliche Daten</div> <div class="form-row"> <label class="label-left">Id</label> <input type="text"> <label class="label-special">Angelegt</label> <input type="date"> <label class="label-special">Geändert</label> <input type="date"> </div> <div class="form-row"> <label class="label-left">Gesperrt</label> <input type="checkbox"> <label class="label-middle">Grund</label> <input class="grow-and-shrink" type="text"> </div> <div class="form-row"> <label class="label-left">Anrede</label> <select> <option style="display:none"></option> <option value = "Herr"> Herr</option> <option value = "Frau"> Frau</option> <option value = "Fräulein">Fräulein</option> </select> <label class="label-middle">Titel</label> <select> <option style="display:none"></option> <option value = "Dr"> Dr.</option> <option value = "Professor"> Professor</option> <option value = "Professorin">Professorin</option> </select> </div> <div class="form-row"> <label class="label-left">Firma</label> <input class="input-max" type="text"> </div> <div class="form-row"> <label class="label-left">Familienname</label> <input class="input-max" type="text"> </div> <div class="form-row"> <label class="label-left">Vorname</label> <input class="input-max" type="text"> </div> <div class="form-row"> <label class="label-left">Straße+Nr.</label> <input class="input-max" type="text"> </div> <div class="form-row"> <label class="label-left">Plz</label> <input type="text"> <label class="label-middle">Ort</label> <input class="input-max" type="text"> </div> <div class="form-row"> <label class="label-left">Länderkürzel</label> <select id="kurz"> </select> <label class="label-middle">Land</label> <select class="input-max" id="land"> </select> </div> <div class="form-row"> <label class="label-left"></label> <input type="date"> <label class="label-middle">Steuer-Id.-Nr.</label> <input class="input-max" type="text"> </div> <div class="form-row"> <label class="label-left">MwSt. Nr</label> <input class="input-max" type="text"> </div> <div class="form-row"> <label class="label-left">Festnetz</label> <input class="input-max" type="text"> </div> <div class="form-row"> <label class="label-left">Handy</label> <input class="input-max" type="text"> </div> <div class="form-row"> <label class="label-left">Email</label> <input class="input-max"> </div> <div class="form-row"> <label class="label-left">Fax</label> <input class="input-max" type="text"> </div> <div class="form-row"> <label class="label-left">Website</label> <input class="input-max" type="text"> </div> <div class="form-row row1"> <label class="label-left">Notiz</label> <textarea></textarea> </div> </div> </div> </div> </form> <script> /* Javascript ist nur für die länderauswahl und hat nix mit textarea zutun*/ var laender=[["AD" , "Andorra"], ["AE" , "Vereinigte Arabische Emirate"], ["AF" , "Afghanistan"], ["AG" , "Antigua und Barbuda"], ["AI" , "Anguilla"], ["AL" , "Albanien"], ["AM" , "Armenien"], ["AN" , "Niederländische Antillen"], ["AO" , "Angola"], ["AQ" , "Antarktis"], ["AR" , "Argentinien"], ["AS" , "Amerikanisch-Samoa"], ["AT" , "Österreich (Austria)"], ["AU" , "Australien"], ["AW" , "Aruba"], ["AZ" , "Azerbaijan"], ["BA" , "Bosnien-Herzegovina"], ["BB" , "Barbados"], ["BD" , "Bangladesh"], ["BE" , "Belgien"], ["BF" , "Burkina Faso"], ["BG" , "Bulgarien"], ["BH" , "Bahrain"], ["BI" , "Burundi"], ["BJ" , "Benin"], ["BM" , "Bermudas"], ["BN" , "Brunei Darussalam"], ["BO" , "Bolivien"], ["BR" , "Brasilien"], ["BS" , "Bahamas"], ["BT" , "Bhutan"], ["BV" , "Bouvet Island"], ["BW" , "Botswana"], ["BY" , "Weißrußland (Belarus)"], ["BZ" , "Belize"], ["CA" , "Canada"], ["CC" , "Cocos (Keeling) Islands"], ["CD" , "Demokratische Republik Kongo"], ["CF" , "Zentralafrikanische Republik"], ["CG" , "Kongo"], ["CH" , "Schweiz"], ["CI" , "Elfenbeinküste (Cote D'Ivoire)"], ["CK" , "Cook Islands"], ["CL" , "Chile"], ["CM" , "Kamerun"], ["CN" , "China"], ["CO" , "Kolumbien"], ["CR" , "Costa Rica"], ["CS" , "Tschechoslowakei (ehemalige)"], ["CU" , "Kuba"], ["CV" , "Kap Verde"], ["CX" , "Christmas Island"], ["CY" , "Zypern"], ["CZ" , "Tschechische Republik"], ["DE" , "Deutschland"], ["DJ" , "Djibouti"], ["DK" , "Dänemark"], ["DM" , "Dominica"], ["DO" , "Dominikanische Republik"], ["DZ" , "Algerien"], ["EC" , "Ecuador"], ["EE" , "Estland"], ["EG" , "Ägypten"], ["EH" , "Westsahara"], ["ER" , "Eritrea"], ["ES" , "Spanien"], ["ET" , "Äthiopien"], ["FI" , "Finnland"], ["FJ" , "Fiji"], ["FK" , "Falkland-Inseln (Malvinas)"], ["FM" , "Micronesien"], ["FO" , "Faröer-Inseln"], ["FR" , "Frankreich"], ["FX" , "France, Metropolitan"], ["GA" , "Gabon"], ["GD" , "Grenada"], ["GE" , "Georgien"], ["GF" , "Französisch Guiana"], ["GH" , "Ghana"], ["GI" , "Gibraltar"], ["GL" , "Grönland"], ["GM" , "Gambia"], ["GN" , "Guinea"], ["GP" , "Guadeloupe"], ["GQ" , "Äquatorialguinea"], ["GR" , "Griechenland"], ["GS" , "Südgeorgien und Südliche Sandwich-Inseln"], ["GT" , "Guatemala"], ["GU" , "Guam"], ["GW" , "Guinea-Bissau"], ["GY" , "Guyana"], ["HK" , "Kong Hong"], ["HM" , "Heard und Mc Donald Islands"], ["HN" , "Honduras"], ["HT" , "Haiti"], ["HU" , "Ungarn"], ["ID" , "Indonesien"], ["IE" , "Irland"], ["IL" , "Israel"], ["IN" , "Indien"], ["IO" , "British Indian Ocean Territory"], ["IQ" , "Irak"], ["IR" , "Iran (Islamische Republik)"], ["IS" , "Island"], ["IT" , "Italien"], ["JM" , "Jamaica"], ["JO" , "Jordanien"], ["JP" , "Japan"], ["KE" , "Kenya"], ["KG" , "Kirgisien"], ["KH" , "Königreich Kambodscha"], ["KI" , "Kiribati"], ["KM" , "Komoren"], ["KN" , "Saint Kitts und Nevis"], ["KP" , "Korea, Volksrepublik"], ["KR" , "Korea"], ["KW" , "Kuwait"], ["KY" , "Kayman Islands"], ["KZ" , "Kasachstan"], ["LA" , "Laos"], ["LB" , "Libanon"], ["LC" , "Saint Lucia"], ["LI" , "Liechtenstein"], ["LK" , "Sri Lanka"], ["LR" , "Liberia"], ["LS" , "Lesotho"], ["LT" , "Littauen"], ["LU" , "Luxemburg"], ["LV" , "Lettland"], ["LY" , "Libyen"], ["MA" , "Marokko"], ["MC" , "Monaco"], ["MD" , "Moldavien"], ["MG" , "Madagaskar"], ["MH" , "Marshall-Inseln"], ["MK" , "Mazedonien, ehem. Jugoslawische Republik"], ["ML" , "Mali"], ["MM" , "Myanmar"], ["MN" , "Mongolei"], ["MO" , "Macao"], ["MP" , "Nördliche Marianneninseln"], ["MQ" , "Martinique"], ["MR" , "Mauretanien"], ["MS" , "Montserrat"], ["MT" , "Malta"], ["MU" , "Mauritius"], ["MV" , "Malediven"], ["MW" , "Malawi"], ["MX" , "Mexico"], ["MY" , "Malaysien"], ["MZ" , "Mozambique"], ["NA" , "Namibia"], ["NC" , "Neu Kaledonien"], ["NE" , "Niger"], ["NF" , "Norfolk Island"], ["NG" , "Nigeria"], ["NI" , "Nicaragua"], ["NL" , "Niederlande"], ["NO" , "Norwegen"], ["NP" , "Nepal"], ["NR" , "Nauru"], ["NU" , "Niue"], ["NZ" , "Neuseeland"], ["OM" , "Oman"], ["PA" , "Panama"], ["PE" , "Peru"], ["PF" , "Französisch Polynesien"], ["PG" , "Papua Neuguinea"], ["PH" , "Philippinen"], ["PK" , "Pakistan"], ["PL" , "Polen"], ["PM" , "St. Pierre und Miquelon"], ["PN" , "Pitcairn"], ["PR" , "Puerto Rico"], ["PT" , "Portugal"], ["PW" , "Palau"], ["PY" , "Paraguay"], ["QA" , "Katar"], ["RE" , "Reunion"], ["RO" , "Rumänien"], ["RU" , "Russische Föderation"], ["RW" , "Ruanda"], ["SA" , "Saudi Arabien"], ["SB" , "Salomonen"], ["SC" , "Seychellen"], ["SD" , "Sudan"], ["SE" , "Schweden"], ["SG" , "Singapur"], ["SH" , "St. Helena"], ["SI" , "Slovenien"], ["SJ" , "Svalbard und Jan Mayen Islands"], ["SK" , "Slowakei"], ["SL" , "Sierra Leone"], ["SM" , "San Marino"], ["SN" , "Senegal"], ["SO" , "Somalia"], ["SR" , "Surinam"], ["ST" , "Sao Tome und Principe"], ["SV" , "El Salvador"], ["SY" , "Syrien, Arabische Republik"], ["SZ" , "Swaziland"], ["TC" , "Turk und Caicos-Inseln"], ["TD" , "Tschad"], ["TF" , "Französisches Südl.Territorium"], ["TG" , "Togo"], ["TH" , "Thailand"], ["TJ" , "Tadschikistan"], ["TK" , "Tokelau"], ["TM" , "Turkmenistan"], ["TN" , "Tunesien"], ["TO" , "Tonga"], ["TP" , "Ost-Timor"], ["TR" , "Türkei"], ["TT" , "Trinidad und Tobago"], ["TV" , "Tuvalu"], ["TW" , "Taiwan"], ["TZ" , "Tansania, United Republic of"], ["UA" , "Ukraine"], ["UG" , "Uganda"], ["GB" , "Großbritannien"], ["US" , "Vereinigte Staaten"], ["UM" , "Vereinigte Staaten, Minor Outlying Islands"], ["UY" , "Uruguay"], ["UZ" , "Usbekistan"], ["VA" , "Vatikanstaat"], ["VC" , "Saint Vincent und Grenadines"], ["VE" , "Venezuela"], ["VG" , "Virgin Islands (Britisch)"], ["VI" , "Virgin Islands (U.S.)"], ["VN" , "Vietnam"], ["VU" , "Vanuatu"], ["WF" , "Wallis und Futuna Islands"], ["WS" , "Samoa"], ["YE" , "Jemen"], ["YT" , "Mayotte"], ["YU" , "Jugoslawien"], ["ZA" , "Südafrika"], ["ZM" , "Sambia"], ["ZW" , "Zimbabwe"]]; var ku=document.getElementById('kurz'); var la=document.getElementById('land'); for(a=0;a<=laender.length-1;a++){ ele=document.createElement('option'); ele1=document.createElement('option'); ele.value=laender[a][0]; ele.innerHTML=laender[a][0]; ele1.value=laender[a][1]; ele1.innerHTML=laender[a][1]; ku.appendChild(ele); la.appendChild(ele1); } ku.addEventListener('change',function(f){ for(a=0;a<=laender.length-1;a++){ if(laender[a][0]==this.value){ for (k=0; k<la.options.length; k++) { if (la.options[k].value==laender[a][1]) { la.options[k].selected = true; } } } } }) la.addEventListener('change',function(f){ for(a=0;a<=laender.length-1;a++){ if(laender[a][1]==this.value){ for (k=0; k<ku.options.length; k++) { if (ku.options[k].value==laender[a][0]) { ku.options[k].selected = true; } } } } }) </script>