title: Create a new row of checkboxes
body: <p>I have 10 checkboxes in a row currently, however it is very crowded. I would rather have 5 checkboxes in 2 rows but have no idea how to achieve this.</p>
  <p>I am new to HTML so I may be forgetting something simple. I tried a couple of ways but nothing seems to work. (I left all the code just in case, but labelled where everything is. Checkboxes are at the bottom.)</p>
  <p>Link: <a href="https://codepen.io/Tantlu/full/JjyQYZw" rel="nofollow noreferrer">https://codepen.io/Tantlu/full/JjyQYZw</a></p>
  <p>HTML</p>
  <pre><code>&lt;body&gt;
    &lt;div class=&quot;video-bg&quot;&gt;
   &lt;video width=&quot;320&quot; height=&quot;240&quot; autoplay loop muted&gt;
    &lt;source src=&quot;https://assets.codepen.io/3364143/7btrrd.mp4&quot; type=&quot;video/mp4&quot;&gt;
  Your browser does not support the video tag.
  &lt;/video&gt;
  &lt;/div&gt;
    
  &lt;!-- Header --&gt;  
    
  &lt;h1&gt;Design Survey.&lt;/h1&gt;  
  
  &lt;!-- Form --&gt;  
    
  &lt;form class=&quot;form&quot;&gt;
    
   &lt;!-- Form Element 1 --&gt; 
    
   &lt;div class=&quot;form-control&quot;&gt;
     &lt;label for=&quot;name&quot; class=&quot;label-name&quot;&gt;
       Name
     &lt;/label&gt;
    &lt;input type= &quot;text&quot; id= &quot;name&quot; placeholder= &quot;&quot;/&gt;
          &lt;/div&gt;
    
    &lt;div class=&quot;form-control&quot;&gt;
     &lt;label for=&quot;email&quot; class=&quot;label-email&quot;&gt;
       Email
     &lt;/label&gt;
    &lt;input type=&quot;email&quot; id= &quot;email&quot; placeholder= &quot;&quot; /&gt;
          &lt;/div&gt;
    
    &lt;div class=&quot;form-control&quot;&gt;
     &lt;label for=&quot;age&quot; class=&quot;label-age&quot;&gt;
       Age
     &lt;/label&gt;
    &lt;input type= &quot;number&quot; id= &quot;age&quot; placeholder= &quot;&quot;/&gt;
          &lt;/div&gt;
    
    &lt;!-- Drop Down Box --&gt;
    
    &lt;div class=&quot;form-control&quot;&gt;
      &lt;label for=&quot;edu&quot; id=&quot;label-edu&quot;&gt;
         What is your education level?
      &lt;/label&gt;
      
     &lt;div class=&quot;options&quot;&gt; 
      &lt;select name=&quot;edu&quot; id=&quot;dropdown&quot;&gt;
        &lt;option hidden&gt;&lt;/option&gt;
        &lt;option value=&quot;high-school&quot;&gt;High School&lt;/option&gt;
        &lt;option value=&quot;cert-4&quot;&gt;Certificate IV&lt;/option&gt;
        &lt;option value=&quot;diploma&quot;&gt;Diploma&lt;/option&gt;
        &lt;option value=&quot;b-degree&quot;&gt;Bachelors Degree&lt;/option&gt;
        &lt;option value=&quot;m-degree&quot;&gt;Masters Degree&lt;/option&gt;
       &lt;/select&gt;
      &lt;/div&gt;  
    &lt;/div&gt;      
      
      
  &lt;div class=&quot;form-control&quot;&gt;
    &lt;label&gt;Do you like this design?&lt;/label&gt;
   
  &lt;!-- Radio Buttons --&gt;
    
   &lt;div class=&quot;rad-row&quot;&gt; 
    &lt;label for=&quot;rad1&quot; class=&quot;rc-label&quot;&gt;
      &lt;input type=&quot;radio&quot; id=&quot;rad1&quot; name=&quot;radio&quot;&gt;
      &lt;span class=&quot;rc-text&quot;&gt;Yes&lt;/span&gt;
      &lt;/input&gt;
    &lt;/label&gt;
    
    &lt;label for=&quot;rad2&quot; class=&quot;rc-label&quot;&gt;
      &lt;input type=&quot;radio&quot; id=&quot;rad2&quot; name=&quot;radio&quot;&gt;
      &lt;span class=&quot;rc-text&quot;&gt;No&lt;/span&gt; 
      &lt;/input&gt;
    &lt;/label&gt;
    
    &lt;label for=&quot;rad3&quot; class=&quot;rc-label&quot;&gt;
      &lt;input type=&quot;radio&quot; id=&quot;rad3&quot; name=&quot;radio&quot;&gt;
      &lt;span class=&quot;rc-text&quot;&gt;Unsure&lt;/span&gt; 
      &lt;/input&gt;
    &lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Checkboxes --&gt;
  
  &lt;div class=&quot;form-control&quot;&gt;
    &lt;label class=&quot;label2&quot;&gt;Languages and frameworks known&lt;/label&gt;
  
  &lt;div class= &quot;checkbox-row&quot;&gt;
  &lt;label for=&quot;inp-1&quot; class=&quot;rc-label&quot;&gt;
     &lt;input type=&quot;checkbox&quot; id=&quot;inp-1&quot; name=&quot;inp&quot;&gt;
    &lt;span class=&quot;rc-text&quot;&gt;C&lt;/span&gt;
    &lt;/input&gt;
   &lt;/label&gt;
     
  &lt;label for=&quot;inp-2&quot; class=&quot;rc-label&quot;&gt;
     &lt;input type=&quot;checkbox&quot; name=&quot;inp&quot; id=&quot;inp-2&quot;&gt;
    &lt;span class=&quot;rc-text&quot;&gt;C++&lt;/span&gt;
    &lt;/input&gt;
   &lt;/label&gt;
  
  &lt;label for=&quot;inp-3&quot; class=&quot;rc-label&quot;&gt;
     &lt;input type=&quot;checkbox&quot; name=&quot;inp&quot; id=&quot;inp-3&quot;&gt;
    &lt;span class=&quot;rc-text&quot;&gt;C#&lt;/span&gt;
    &lt;/input&gt;
   &lt;/label&gt;
  
  &lt;label for=&quot;inp-4&quot; class=&quot;rc-label&quot;&gt;
     &lt;input type=&quot;checkbox&quot; id=&quot;inp-4&quot; name=&quot;inp&quot;&gt;
    &lt;span class=&quot;rc-text&quot;&gt;Java&lt;/span&gt;
    &lt;/input&gt;
   &lt;/label&gt;
  
  &lt;label for=&quot;inp-5&quot; class=&quot;rc-label&quot;&gt;
     &lt;input type=&quot;checkbox&quot; id=&quot;inp-5&quot; name=&quot;inp&quot;&gt;
    &lt;span class=&quot;rc-text&quot;&gt;Python&lt;/span&gt;
    &lt;/input&gt;
   &lt;/label&gt;
  
  &lt;label for=&quot;inp-6&quot; class=&quot;rc-label&quot;&gt;
     &lt;input type=&quot;checkbox&quot; id=&quot;inp-6&quot; name=&quot;inp&quot;&gt;
    &lt;span class=&quot;rc-text&quot;&gt;JavaScript&lt;/span&gt;
    &lt;/input&gt;
   &lt;/label&gt;
  
  &lt;label for=&quot;inp-7&quot; class=&quot;rc-label&quot;&gt;
     &lt;input type=&quot;checkbox&quot; id=&quot;inp-7&quot; name=&quot;inp&quot;&gt;
    &lt;span class=&quot;rc-text&quot;&gt;React&lt;/span&gt;
    &lt;/input&gt;
   &lt;/label&gt;
  
  &lt;label for=&quot;inp-8&quot; class=&quot;rc-label&quot;&gt;
     &lt;input type=&quot;checkbox&quot; id=&quot;inp-8&quot; name=&quot;inp&quot;&gt;
    &lt;span class=&quot;rc-text&quot;&gt;HTML&lt;/span&gt;
    &lt;/input&gt;
   &lt;/label&gt;
  
  &lt;label for=&quot;inp-9&quot; class=&quot;rc-label&quot;&gt;
     &lt;input type=&quot;checkbox&quot; id=&quot;inp-9&quot; name=&quot;inp&quot;&gt;
    &lt;span class=&quot;rc-text&quot;&gt;Solidity&lt;/span&gt;
    &lt;/input&gt;
   &lt;/label&gt;
  
  &lt;label for=&quot;inp-10&quot; id=&quot;inp-1&quot; class=&quot;rc-label&quot;&gt;
     &lt;input type=&quot;checkbox&quot; id=&quot;inp-10&quot; name=&quot;inp&quot;&gt;
    &lt;span class=&quot;rc-text&quot;&gt;Spring&lt;/span&gt;
    &lt;/input&gt;
   &lt;/label&gt;
  &lt;/div&gt;  
  &lt;/div&gt;  
  &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>@import url(&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&amp;display=swap&quot;);
  
  body {
    font-family: 'Poppins', sans-serif;
    color: #fff;
  }
  
  /* Background */
  
  .video-bg {
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  
  video {
    width: 100%;
    height: 100%;
    object-fit: cover;
   }
  
  /* Header */
  
  h1 {
    position: relative;
    font-family: 'Poppins', sans-serif;
    color: #fff;
    text-align: center;
    top: 0;
    font-size: 45px;
  }
  
  /* Form */
  
  .form {
    max-width: 700px;
    margin: 50px auto; 
    background-color: rgba(16 18 27 / 30%);
    border-radius: 14px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 30px 30px;
  }
  
  /* Form Items */
  
  .form-control {
    text-align: left;
    margin-bottom: 25px;
    font-size: 1.1rem;
    letter-spacing: 0.4px;
    font-weight: 500;
  }
  
  .form-control label {
    display: block;
    margin-bottom: 15px;
  }
  
  .form-control input, 
  .form-control select, 
  .form-control textarea {
    background: rgba(16 18 27 / 35%);
    width: 97%;
    border: none;
    border-radius: 4px;
    padding: 10px;
    display: block;
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.1px;
    color: #fff;
    outline: none;
    box-shadow: 0 0 0 2px rgb(134 140 160 / 8%);
  }
  
  /* Dropdown Box */
  
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  
  select {
    width: 100% !important; 
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    z-index: 10;
    position: relative;
    background: transparent;
  }
  
  .options {
    position: relative;
    margin-bottom: 25px;
  }
  
  .options::after {
    content: &quot;&gt;&quot;;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    top: 6px;
    right: 15px;
    position: absolute;
    z-index: 0;
  }
  
  /* Radio Buttons &amp; Checkboxes */
  
  .form-control input[type=&quot;radio&quot;],
  .form-control input[type=&quot;checkbox&quot;] {
    display: inline-block;
    width: auto;
  }
  
  .rc-label {
    border-radius: 100px;
    padding: 10px 10px;
    cursor: pointer;
    transition: .3s;
    flex: 1;
  }
  
  .rc-label:hover,
  .rc-label:focus-within {
    background: hsla(0, 0%, 80%, .14);
  }
  
  .rc-text {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.1px;
  }
  
  /* Radio Buttons */
  
  .rad-row {
    display: flex;
    margin-bottom: -20px;
  }
  
  /* Checkboxes */
  
  .checkbox-row {
    display: flex;
  }
  </code></pre>