Using css to align form element by fieldset

content/multipledataset.html

@@ -4,6 +4,7 @@ date: 2019-09-27 16:41
 draft: false
 ---
 <link rel="stylesheet" type="text/css" href="/css/modal.css" />
+<link rel="stylesheet" type="text/css" href="/css/form.css" />
 <script src="/js/data.js" type="text/javascript"></script>
 <script src="/js/loadAllData.js" type="text/javascript"></script>
 <script src="/js/getFullDataPath.js" type="text/javascript"></script>
@@ -284,7 +285,7 @@ draft: false
       <input type="file" multiple onchange="reloadSelect()" id="customFiles_input" disabled=true></input>
     </div>
   </fieldset>
-  <fieldset>
+  <fieldset class="table">
     <div>
       <label for="mol_select">Molecule</label>
       <select multiple id="mol_select" name="molecule"></select>

content/singledataset.html

@@ -4,6 +4,7 @@ date: 2019-08-29 09:00
 draft: false
 ---
 <link rel="stylesheet" type="text/css" href="/css/modal.css" />
+<link rel="stylesheet" type="text/css" href="/css/form.css" />
 <script src="/js/processingIndicator.js" type="text/javascript"></script>
 <script src="/js/data.js" type="text/javascript"></script>
 <script src="/js/loadAllData.js" type="text/javascript"></script>
@@ -74,11 +75,11 @@ draft: false
     const LatexInline = ['\\(', '\\)']
     var md = [];
     var els = [];
-    var customRenderingProp = ["excitations", "sourceFile","DOI"]
-    const fullNames={
-      Abs:'Absorption',
-      Fluo:"Fluorescence",
-      ZPE:"ZPE"
+    var customRenderingProp = ["excitations", "sourceFile", "DOI"]
+    const fullNames = {
+      Abs: 'Absorption',
+      Fluo: "Fluorescence",
+      ZPE: "ZPE"
     }
     for (const key of Object.keys(window.data)) {
       if (window.data[key] != null) {
@@ -150,6 +151,7 @@ draft: false
   For this select a method for absorption, fluorescence or ZPE
 </p>
 <form>
+  <fieldset class="table">
     <div>
       <label for="select_mol">Select a molecule</label>
       <select id="select_mol" onchange="select_mol_onchange(event)">
@@ -174,6 +176,7 @@ draft: false
         <option value="" disabled=true selected=true>Select a ZPE method</option>
       </select>
     </div>
+  </fieldset>
 </form>
 <h1>Data</h1>
 <section id=data>

static/css/form.css

@@ -0,0 +1,16 @@
+form fieldset.table {
+  display: table;
+}
+
+form fieldset.table div {
+  display: table-row;
+}
+
+form fieldset.table input, form fieldset.table select, form fieldset.table label {
+  display: table-cell;
+  margin: 3px;
+}
+
+form fieldset.table label {
+  text-align: right;
+}