<form action="#">
  <fieldset>
    <legend>Personal Details</legend>
      <ul>
        <li>
          <label for="name">Name:</label>
          <input type="name" id="name" name="name">
        </li>
        
        <li>
          <label for="age">Age: </label>
          <input type="text" id="age" name="age">
        </li>
      </ul>
  </fieldset>

  <fieldset>
    <legend>Comment information</legend>
    <ul>
      <li>
        <label for="comment">Comment</label>
        <input type="comment" id="comment" name="comment">
      </li>
      
      <li>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email"></input>
      </li>
    </ul>
  </fieldset>
</form>

form {
  /*   center the form on the page */
  margin: 0 auto;
  width: 500px;
  /*   form outline */
  padding: 1em;
  border: 1px solid #ccc;
  border-radius: 1em;
  font-family: helvetica,monospace, san-serif;
 box-shadow: -4px -3px 45px 21px rgba(0,0,0,0.35);
  
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

form li + li {
  margin-top: 1rem;
}

label {
  /*   Uniform size & alignment */
  display: inline-block;
  width: 90px;
  text-align: right;
}

fieldset{
  margin: 1rem;
  padding: 1rem;
}