title: How to display buttons in a horizontal row?
body: <p><a href="https://i.stack.imgur.com/HQL1a.jpg" rel="nofollow noreferrer">Desired Output</a></p>
  
  <p>I want to get the buttons aligned like the attached image but however, on executing the code, I am getting <a href="https://i.stack.imgur.com/TxW6e.jpg" rel="nofollow noreferrer">Output like this</a>, where the buttons are below one another. 
  I have attached the HTML, CSS and JS code. I am new to UI design and so I am failing to find out the error in the CSS code.
  I shall be very grateful if anyone suggests me how can I get the Desired Output.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.form').find('input').on('keyup blur focus', function (e) {
    
    var $this = $(this),
        label = $this.prev('label');
  
     if (e.type === 'keyup') {
     if ($this.val() === '') {
            label.removeClass('active highlight');
          } else {
            label.addClass('active highlight');
          }
      } else if (e.type === 'blur') {
       if( $this.val() === '' ) {
        label.removeClass('active highlight'); 
     } else {
        label.removeClass('highlight');   
     }   
      } else if (e.type === 'focus') {
        
        if( $this.val() === '' ) {
        label.removeClass('highlight'); 
     } 
        else if( $this.val() !== '' ) {
        label.addClass('highlight');
     }
      }
  
  });
  
  $('.tab a').on('click', function (e) {
    
    e.preventDefault();
    
    $(this).parent().addClass('active');
    $(this).parent().siblings().removeClass('active');
    
    target = $(this).attr('href');
  
    $('.tab-content &gt; div').not(target).hide();
    
    $(target).fadeIn(600);
    
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
    box-sizing: border-box;
    margin:0px;
    padding:0px;
  }
  
  
  body {
    background:url(../background.jpg);
    /*font-family: 'Titillium Web', sans-serif;*/
    font-family: 'Roboto', sans-serif;
    background-size:cover;
  }
  .user{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: relative;
  top: -10px;
  left: calc(50%-50px);
  right: -170px;
  }
  
  a {
    text-decoration: none;
    color: #040675;
    transition: .5s ease;
  }
  a:hover {
    color: #179b77;
  }
  
  .form {
    padding: 40px;
    max-width: 500px;
    margin: 40px auto;
    border-radius: 4px;
    box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
    transition: .5s ease;
    position: relative;
    
  }
  
  .form:hover {
   box-shadow: 0px 0px 40px 16px rgba(18,18,18,1.00);
   }
  
  .tab-group {
    list-style: none;
    padding: 0;
    margin: 0 5px 20px 0;
  }
  .tab-group:after {
    content: "";
    display: table;
    clear: both;
  }
  .tab-group li a {
    display: block;
    text-decoration: none;
    padding: 15px;
    background: #0C0E67;
    color: #fff;
    font-size: 20px;
    float: left;
    width: 50%;
    text-align: center;
    cursor: pointer;
    transition: .5s ease;
  }
  .tab-group li a:hover {
    background: #0C0E67;
    color: #ffffff;
  }
  .tab-group .active a {
    background:#1316FA;
    color: #ffffff;
  }
  
  .tab-content &gt; div:last-child {
    display:none;
  }
  
  h1 {
    text-align: center;
    color: #fff;
    font-weight: 300;
    margin: 0 0 40px;
  }
  
  /*label {
    position: absolute;
    transform: translateY(6px);
    left: 13px;
    color: rgba(255,255,255,0.7);
    transition: all 0.25s ease;
    pointer-events: none;
    font-size: 22px;
  }
  label .req {
    margin: 2px;
    color: red;
  }*/
  
  label.active {
    transform: translateY(50px);
    left: 2px;
    font-size: 0px;
  }
  label.active .req {
    opacity: 0;
  }
  
  label.highlight {
    color: #000;
    margin-top:-10px;
  }
  
  /*input[type="radio"] {
    height: 10px;
    width: 10px;
  
    }*/
  
  input[type="text"],input[type="email"],input[type="tel"],input [type="password"] {
    font-size: 18px;
    display: block;
    width: 100%;
    height: 100%;
    padding: 1px 3px;
    background-image: none;
    border: 1px solid #fff;
    color: #fff;
    border-radius: 0;
    transition: border-color .25s ease, box-shadow .25s ease;
  }
  input:focus{
    outline: 0;
    border-color: #000;
  }
  
  .field-wrap input{
    padding-left: 40px;
    width: 100%;
    height: 28px;
  }
  
  .field-wrap i{
    position: absolute;
    left:0;
    top: -5px;
    padding: 9px 8px;
    color: silver;
  }
  .field-wrap {
    position: relative;
    margin-bottom: 30px;
    
  }
  
  .top-row:after {
    content: "";
    display: table;
    clear: both;
  }
  .top-row &gt; div {
    float: left;
    width: 48%;
    margin-right: 4%;
  }
  .top-row &gt; div:last-child {
    margin: 0;
  }
  
  
  .button {
    border: 0;
    outline: none;
    border-radius: 20px;
    cursor: pointer;
    padding: 5px 5px;
    font-size: 2rem;
    font-weight: 50rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    background: rgb(54, 57, 221);
    color: #ffffff;
    transition: all 0.5s ease;
  }
  .button:hover, .button:focus {
    background: #1316FA;
  }
  
  .bday,
  .form-gender{
  position: relative;
  margin-bottom: 20px;
  color: #fff;
  }
  .button-block {
    display: block;
    width: 100%;
  }
  
  .forgot {
    margin-top: -20px;
    text-align: right;
    margin-bottom:10px;
  }
  fieldset.date { 
    margin: 0; 
    padding: 0; 
    padding-left: 20px; 
    padding-bottom: .5em; 
    display: block; 
    border: none; 
  } 
  fieldset.date legend { 
    margin: 0; 
    padding: 0; 
    margin-top: .25em; 
    font-size: 100%; 
  } 
  
  
  fieldset.date label { 
    position: absolute; 
    top: -20em; 
    left: -200em; 
  } 
  
  fieldset.date select { 
  margin: 0; 
  padding: 0; 
  font-size: 100%; 
  display: inline; 
  } 
  
  .birth{
    padding-left: 30px;
    padding-right: 34px;
    padding-bottom: 8px;
  }
  
  #check1{
    padding-bottom: 10px;
    color: #fff;
  }
  #check2{
    color: #fff;
  }
  
  .footer{
    position: relative;
   /* width: 70%
    padding-left: 180px;*/
    text-align: right;
    color: #fff;
    margin-top: 20px;
  }
  
  .footer&gt; div.social{
  position: relative;
  float: right;
  color:#fff;
  font-size:19px;
  cursor: pointer;
  }
  
  .footer i{
    position: relative;
    width: 60px;
    height:40px;
    left:0px;
    line-height: 40px;
    background: rgb(0,0,0,0);
    text-align: center;
  }
  
  .footer.facebook{
    background: #3b5999;
  }
  
  .footer.linkedin{
    background: #0077B5;
  }
  
  .footer.google{
    background: #dd4b39;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Sign-Up/Login Form&lt;/title&gt;
    &lt;link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
    &lt;link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"&gt;
    &lt;link rel="stylesheet" href="css/style.css"&gt; 
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="form"&gt;
        
        &lt;ul class="tab-group"&gt;
          &lt;li class="tab active"&gt;&lt;a href="#signup"&gt;Sign Up&lt;/a&gt;&lt;/li&gt;
          &lt;li class="tab"&gt;&lt;a href="#login"&gt;Log In&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        
        &lt;div class="tab-content"&gt;
          &lt;div id="signup"&gt;   
          
            &lt;form action="" method="post"&gt;
            
           
              &lt;div class="field-wrap"&gt;
                &lt;input type="text" placeholder="First Name" required autocomplete="off" /&gt;
                &lt;i class="fa fa-user icon"&gt;&lt;/i&gt;
              &lt;/div&gt;
          
              
            &lt;div class="field-wrap"&gt;
                
              &lt;input type="text" placeholder="Last Name" required autocomplete="off"/&gt;
              &lt;i class="fa fa-user icon"&gt;&lt;/i&gt;
            &lt;/div&gt;
  
            &lt;div class="field-wrap"&gt;
              
              &lt;input type="email" placeholder="E-mail" required autocomplete="off"/&gt;
              &lt;i class="fa fa-envelope icon"&gt;&lt;/i&gt;
            &lt;/div&gt;
            
            
  
            &lt;div class="field-wrap"&gt;
                &lt;input type="tel" placeholder="Phone" required autocomplete="off"/&gt;
                &lt;i class="fa fa-phone icon"&gt;&lt;/i&gt;
              &lt;/div&gt;
            
              &lt;div class="field-wrap"&gt;
                  &lt;input type="text" placeholder="Post Code" pattern="[0-9]{5}" required autocomplete="off"/&gt;
                  &lt;i class="fa fa-map-marker icon"&gt;&lt;/i&gt;
                &lt;/div&gt;
  
                &lt;div class="bday"&gt;
                    &lt;labe&gt;
                        Birthday&lt;br&gt;
                      &lt;/label&gt;
                      &lt;select name="DoBday" class="birth"&gt;
                          &lt;option &gt;Month&lt;/option&gt;
                          &lt;option value="1"&gt; 1 &lt;/option&gt;
                          &lt;option value="2"&gt; 2 &lt;/option&gt;
                          &lt;option value="3"&gt; 3 &lt;/option&gt;
                          
                    &lt;/select&gt;
                    &lt;select name="DoBMonth" class="birth"&gt;
                        &lt;option &gt;Day&lt;/option&gt;
                        &lt;option value="January"&gt; January &lt;/option&gt;
                        &lt;option value="February"&gt; February &lt;/option&gt;
                        &lt;option value="March"&gt; March &lt;/option&gt;
                        
                    &lt;/select&gt;
                    
                        &lt;select name="DoByear" class="birth"&gt;
                                &lt;option&gt;Year&lt;/option&gt;
                                &lt;option value="2000"&gt; 2000 &lt;/option&gt;
                                &lt;option value="1990"&gt; 1990 &lt;/option&gt;
                                &lt;option value="1991"&gt; 1991 &lt;/option&gt;
                                
                         &lt;/select&gt;
                &lt;/div&gt;
  
                &lt;div class="form-gender"&gt;
                    &lt;span id="gend"&gt;
                            Gender&lt;br&gt;
                     &lt;/span&gt;
                    &lt;input type="radio" name="male" value="male" id="" checked&gt; Male &amp;nbsp; &amp;nbsp; &amp;nbsp;
                    &lt;input type="radio" name="male" value="female" id=""&gt; Female &amp;nbsp; &amp;nbsp; &amp;nbsp;
                    &lt;input type="radio" name="male" value="other" id=""&gt; Other
                &lt;/div&gt;
  
                &lt;div class="field-wrap"&gt;
                    &lt;input type="password" placeholder="Password" required autocomplete="off"/&gt;
                    &lt;i class="fa fa-lock icon"&gt;&lt;/i&gt;
                  &lt;/div&gt;
  
                &lt;div class="field-wrap"&gt;
                   &lt;input type="password" placeholder="Confirm Password" required autocomplete="off"/&gt;
                    &lt;i class="fa fa-lock icon"&gt;&lt;/i&gt;
                &lt;/div&gt;
                &lt;div id="check1"&gt;
                    &lt;input type="checkbox"  id="chk1"&gt; I accept the &lt;a href="#" style="color:dodgerblue"&gt;Terms &lt;/a&gt;and &lt;a href="#" style="color:dodgerblue"&gt;Conditions&lt;/a&gt;
                &lt;/div&gt;
            &lt;button type="submit" class="button button-block"/&gt;Register &lt;/button&gt;
            
            &lt;/form&gt;
  
          &lt;/div&gt;
          
          &lt;div id="login"&gt;   
        
           &lt;img src="./user.png" class="user"&gt;
            
            &lt;form action="/" method="post"&gt;
            
             &lt;div class="field-wrap"&gt;
              
              &lt;input type="email" placeholder="E-mail" required autocomplete="off"/&gt;
              &lt;i class="fa fa-envelope icon"&gt;&lt;/i&gt;
            &lt;/div&gt;
            
            &lt;div class="field-wrap"&gt;
              &lt;input type="password" placeholder="Password" required autocomplete="off"/&gt;
              &lt;i class="fa fa-lock icon"&gt;&lt;/i&gt;
            &lt;/div&gt;
            &lt;div id="check2"&gt;
                &lt;input type="checkbox"  id="chk2"&gt; Remember Me
            &lt;/div&gt;
            &lt;p class="forgot"&gt;&lt;a href="#"&gt;Forgot Password?&lt;/a&gt;&lt;/p&gt;
            
            &lt;button class="button button-block"/&gt;Log In&lt;/button&gt;
            &lt;!--&lt;div class="span"&gt;
              &lt;span&gt;OR&lt;/span&gt;
            &lt;/div&gt;--&gt;
            &lt;div class="footer"&gt;
              OR Login With
              &lt;div class="social-facebook"&gt;
                  &lt;i class="fa fa-facebook" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;/div&gt;
              &lt;div class="social-linkedin"&gt;
                  &lt;i class="fa fa-linkedin" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;/div&gt;
              &lt;div class="social-google"&gt;
                  &lt;i class="fa fa-google-plus" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            
            &lt;/form&gt;
  
          &lt;/div&gt;
          
        &lt;/div&gt;&lt;!-- tab-content --&gt;
        
  &lt;/div&gt; &lt;!-- /form --&gt;
  &lt;script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'&gt;&lt;/script&gt;
  &lt;script  src="js/index.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>