<form>
      <fieldset>
        <legend>Personal details</legend>
        <p>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name">
        </p>
        <p>
      <label for="age">Age:</label>
      <input type="number" id="age" name="age">
        </p>
      </fieldset>

      <fieldset>
        <legend>Comment information</legend>
        <p>
      <label for="comment">Comment:</label>
      <input type="text" id="comment" name="comment">
        </p>
        <p>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email">
        </p>
      </fieldset>
    </form>
      body {
        background-color: #fff;
        color: #333;
        font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
        padding: 1em;
        margin: 0;
      }

      * {
        box-sizing: border-box;
      }
label {
  display: inline-block;
  width: 5em;
  text-align: right;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.