title: CSS Flexbox with Equal Sized Child Element
body: <p>I'm doing one of the project for FreeCodeCamp's certificate and I'm having trouble getting the FlexBox's child elements to have equal size (height and width).</p>
  
  <p>I have tried multiple use of Flex-Grow, Shrink, etc. But it seems like because of the length of the contents inside the element, they are not equally sized.</p>
  
  <p>My Codepen: <a href="https://codepen.io/jyjang703/pen/PooeGxv" rel="nofollow noreferrer">https://codepen.io/jyjang703/pen/PooeGxv</a></p>
  
  <p>Basically, I want the third and 4th box of the FlexBox to be same size...
  Any help would be appreciated!</p>
  
  <pre><code>&lt;header&gt;
      &lt;h1&gt;Self-Happiness Survery&lt;/h1&gt;
      &lt;h4&gt;For anyone with regrets, griefs, and looking for changes...&lt;/h4&gt;
  &lt;/header&gt;
  
  &lt;main&gt;
    &lt;div&gt;
    &lt;fieldset class="PersonInfo"&gt;
      &lt;form action=""&gt;
        &lt;label&gt;First Name:&lt;/label&gt;
        &lt;input type="text" name="First Name"&gt;
        &lt;br&gt;
        &lt;br&gt;
        &lt;label&gt;Last Name:&lt;/label&gt;
        &lt;input type="text" name="Last Name"&gt;
        &lt;br&gt;
        &lt;br&gt;
        &lt;label&gt;Email:&lt;/label&gt;
        &lt;input type="text" name="Email"&gt;
        &lt;br&gt;
        &lt;br&gt;
        &lt;label&gt;Number:&lt;/label&gt;
        &lt;input type="tel" name="Number" minlength="1" maxlength="10"&gt;
        &lt;br&gt;
        &lt;br&gt;
      &lt;/form&gt;
    &lt;/fieldset&gt;
  
    &lt;fieldset class="PersonInfo_2"&gt;
      &lt;form action=""&gt;
        &lt;label&gt;Age:&lt;/label&gt;
        &lt;input type="text" name="First Name"&gt;
        &lt;br&gt;
        &lt;br&gt;
        &lt;label&gt;Sex:&lt;/label&gt;
        &lt;select&gt;
          &lt;option disabled selected value&gt; -- select an option -- &lt;/option&gt;
          &lt;option value="Male"&gt;Male&lt;/option&gt;
          &lt;option value="Female"&gt;Female&lt;/option&gt;
        &lt;/select&gt;
        &lt;br&gt;
        &lt;br&gt;
        &lt;label&gt;Occupation:&lt;/label&gt;
        &lt;input type="text" name="Email"&gt;
        &lt;br&gt;
        &lt;br&gt;
        &lt;label&gt;Current Martial Status:&lt;/label&gt;
          &lt;input type="radio" name="sex" value="male"&gt; Male
          &lt;input type="radio" name="sex" value="female"&gt; Female
        &lt;br&gt;
        &lt;br&gt;
      &lt;/form&gt;
    &lt;/fieldset&gt;
  
    &lt;fieldset class="Checkbox_1"&gt;
      &lt;form action=""&gt;
        &lt;label&gt;What is causing your inner pain?&lt;/label&gt;
        &lt;br&gt;
        &lt;br&gt;
        &lt;input type="checkbox" name="Pain"&gt; Breakup
        &lt;input type="checkbox" name="Pain"&gt; Current Job
        &lt;input type="checkbox" name="Pain"&gt; Friendship
        &lt;input type="checkbox" name="Pain"&gt; Family Issue
        &lt;br&gt;
        &lt;br&gt;
        &lt;input type="checkbox" name="Pain"&gt; Future
        &lt;input type="checkbox" name="Pain"&gt; Self Confidence
        &lt;input type="checkbox" name="Pain"&gt; Loneliness
        &lt;input type="checkbox" name="Pain"&gt; Financial Stability
      &lt;/form&gt;
    &lt;/fieldset&gt;
  
    &lt;fieldset class="Checkbox_2"&gt;
      &lt;form action=""&gt;
        &lt;label&gt;What is causing your inner pain?&lt;/label&gt;
        &lt;br&gt;
        &lt;br&gt;
        &lt;input type="checkbox" name="Pain"&gt; Breakup
        &lt;input type="checkbox" name="Pain"&gt; Current Job
        &lt;input type="checkbox" name="Pain"&gt; Friendship
        &lt;input type="checkbox" name="Pain"&gt; Family Issue
        &lt;br&gt;
        &lt;br&gt;
        &lt;input type="checkbox" name="Pain"&gt; Future
        &lt;input type="checkbox" name="Pain"&gt; Self Confidence
        &lt;input type="checkbox" name="Pain"&gt; Loneliness
        &lt;input type="checkbox" name="Pain"&gt; Financial Stability
      &lt;/form&gt;
    &lt;/fieldset&gt;
    &lt;/div&gt;
  
    &lt;fieldset class="Additional_Information"&gt;
      &lt;h3&gt;Please provide any additional information&lt;/h3&gt;
      &lt;form action=""&gt;
        &lt;textarea rows="4" cols="50" placeholder="Additional Life Storeis Here..."&gt;
        &lt;/textarea&gt;
      &lt;/form&gt;
    &lt;/fieldset&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p>Below is CSS:</p>
  
  <pre><code>body{
    background-color: #f3e9fc;
  }
  
  header{
    text-align: center;
    font-size: 1.5rem;
  }
  
  div{
    margin: auto;
    display: flex;
    justify-content: space-between;
  }
  
  label{
    display: inline-block;
    float: left;
    width: 150px;
    text-align: left; /*Change to right here if you want it close to the inputs*/
  }
  
  .Additional_Information{
    text-align: center;
  }
  </code></pre>