<h1>Fieldset and Legend example</h1>
<form>
  <fieldset class="inputTextWrap">
    <legend>Your data:</legend>
    
    <div class="inputWrap">
      <label for='name'>Name:</label>
      <input id="name" type="text"/>
    </div>
    
    
    <div class="inputWrap">
      <label for='email'>Your e-mail:</label>
      <input id="email" type="email"/>
    </div>
    
  </fieldset>
  
  <fieldset>
    <legend>Choose your best friend</legend>
    <input type="radio" id="Albert" name="friends">
    <label for="Albert">Albert</label>
    
    <br/>
    
    <input type="radio" id="Stefan" name="friends">
    <label for="Stefan">Stefan</label>
  </fieldset>
</form>
*{font-family: arial}

body {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

h1 {
  text-align: center;
}

form {
  max-width: 500px;
  padding: 20px;
  box-shadow: 0px 0px 16px 4px rgba(0,0,0,0.1)
}

fieldset {
  margin: 0 0 30px 0;
  border: 1px solid #ccc;
}

legend {
  background: #eee;
  padding: 4px 10px;
  color: #000;
  margin: 0 auto;
  display: block;
}
.inputWrap {
  margin: 0 0 12px 0;
  width: 100%;
}

.inputWrap label {
  margin: 0 0 3px 0;
  display: block;
}

.inputWrap input {
  padding: 4px 10px;
  font-size: 16px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.