Form styling example with exal length labels in ordered list

dabblet.css

/**
 * Form styling example with exal length labels in ordered list
 */
 
* {
	padding:0;
	margin:0;
}


fieldset {
     border: 1px solid silver;
     margin: 10px;
     padding: 10px;
     min-width: 100px;
     display: inline-block;
 }

 fieldset li{
     width: 100%;
     display: block;
     position: relative;
     margin-bottom: 2px;
 }

 fieldset label{
     margin-right: 10px;
     position: relative;
 }

 fieldset label:after{
     content: ": ";
     position: absolute;
     right: -0.2em;
 }

 fieldset input{
     float: right;
 }

 fieldset li .additionalInfo{
     position: absolute;
     padding: 5px;
     margin-top: 5px;
     display: none;
     background-color: white;
     border: 1px solid black;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     -webkit-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
     box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
     z-index: 10;
 }

 fieldset li:hover .additionalInfo{
     display: block;
 }

dabblet.html

 <form>
     <ol>
         <fieldset>
             <legend>Account</legend>
                 <li><label for="username">Username</label><input type="text" id="username" required  /></li>
                 <li><label for="password">Password</label><input type="password" id="password" required  /></li>
         </fieldset>

         <fieldset>
             <legend>Personal Data</legend>
                 <li><label for="name">Name</label><input type="text" id="name" /></li>
                 <li><label for="surname">Surname</label><input type="text" id="surname" /></li>
                 <li><label for="dob">Date of birth</label><input type="date" min="1900-01-01" max="2012-02-17" placeholder="YYYY-MM-DD" id="dob" /><span class="additionalInfo">Please input the date of birth in the following format: YYYY-MM-DD</span></li>
         </fieldset>

         <fieldset>
             <legend>Contact Information</legend>
                 <li><label for="email">E-mail</label><input type="email" id="email" required placeholder="[email protected]" /></li>
                 <li><label for="tel">Telephone number</label><input type="tel" id="tel" placeholder="(555) 555-5555"
              pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" /><span class="additionalInfo">Please input the telephone number in the following format: (555) 555-5555</span></li>
                 <li><label for="url">Website</label><input type="url" id ="url" placeholder="http://www.example.com"></li>
         </fieldset>

         <li><input type="submit" /></li>
     </ol>
 </form>

settings.json

{"view":"split","seethrough":"","prefixfree":"1","page":"html"}