<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Overpass&display=swap" rel="stylesheet">
  <link href="css/styles.css" rel="stylesheet">
  <title>Registration Form with Flexbox</title>
</head>
<body>
  <form class="registration" action="index.html" method="post">
    <fieldset class="contact-info">
      <legend>Contact Information</legend>
      <div class="flex-pair">
        <label for="name">Full Name</label>
        <input type="text" id="name" name="name">
      </div>
      
       <div class="flex-pair">
        <label for="email"> Email Address</label>
        <input type="email" id="email" name="email">
      </div>
      
       <div class="flex-pair">
        <label for="telephone">Phone Number</label>
        <input type="tel" id="telephone" name="telephone">
      </div>
      
    </fieldset>
  </form>
  
</body>
</html>
* {
  box-sizing: border-box;
}

body {
  margin: 0 auto;
  max-width: 768px;
  font-family: 'Overpass', sans-serif;
  background-color: #6C698D;
  color: white;
}

input {
  border: 1px solid white;
}

.contact-info {
  padding: 50px 50px 35px 50px;
}

.contact-info .flex-pair {
  display: flex;
  flex-direction: column;
}

.contact-info label {
  margin-bottom: 10px;
}

.contact-info input {
  height: 50px;
  margin-bottom: 15px;
}

#telephone {
  max-width: 50%;
}

@media (min-width: 768px) {
  .contact-info .flex-pair {
    flex-direction: row;
  }
  
  .contact-info input {
    flex-grow: 1;
    flex-basis: 75%;
  }
  
  .contact-info label {
    flex-basis: 25%;
    height: 50px;
    margin: auto 0;
  }
  
/* margin: 0 auto sets the top and bottom margins both to 0 and the left and right margins to auto.
margin: auto 0 sets the top and bottom margins both to auto and the left and right margins to 0.     */
    
  
  
  #telephone {
    max-width: 25%;
  }
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.